Installation and Setup

Redux Toolkit

import{configureStore}from'@reduxjs/toolkit'importtodosReducerfrom'./features/todos/todosSlice'importfiltersReducerfrom'./features/filters/filtersSlice'conststore=configureStore({reducer:{todos:todosReducer,filters:filtersReducer,},})// The thunk middleware was automatically added

Manual Setup

npm install redux-thunkyarn add redux-thunk

import{createStore,applyMiddleware}from'redux'import{thunk}from'redux-thunk'importrootReducerfrom'./reducers/index'conststore=createStore(rootReducer,applyMiddleware(thunk))

Injecting a Custom Argument

import{configureStore}from'@reduxjs/toolkit'importrootReducerfrom'./reducer'import{myCustomApiService}from'./api'conststore=configureStore({reducer:rootReducer,middleware:getDefaultMiddleware=>getDefaultMiddleware({thunk:{extraArgument:myCustomApiService,},}),})// laterfunctionfetchUser(id){// The `extraArgument` is the third arg for thunk functionsreturn(dispatch,getState,api)=>{// you can use api here}}

conststore=configureStore({reducer:rootReducer,middleware:getDefaultMiddleware=>getDefaultMiddleware({thunk:{extraArgument:{api:myCustomApiService,otherValue:42,},},}),})// laterfunctionfetchUser(id){return(dispatch,getState,{ api, otherValue})=>{// you can use api and something else here}}

conststore=createStore(reducer,applyMiddleware(withExtraArgument(api)))

Why Do I Need This?

Motivation

constINCREMENT_COUNTER='INCREMENT_COUNTER'functionincrement(){return{type:INCREMENT_COUNTER,}}functionincrementAsync(){returndispatch=>{setTimeout(()=>{// Yay! Can invoke sync or async actions with `dispatch`dispatch(increment())},1000)}}

functionincrementIfOdd(){return(dispatch,getState)=>{const{ counter}=getState()if(counter%2===0){return}dispatch(increment())}}

What’s a thunk?!

// calculation of 1 + 2 is immediate// x === 3letx=1+2// calculation of 1 + 2 is delayed// foo can be called later to perform the calculation// foo is a thunk!letfoo=()=>1+2

Composition

import{createStore,applyMiddleware}from'redux'import{thunk}from'redux-thunk'importrootReducerfrom'./reducers'// Note: this API requires redux@>=3.1.0conststore=createStore(rootReducer,applyMiddleware(thunk))functionfetchSecretSauce(){returnfetch('https://www.google.com/search?q=secret+sauce')}// These are the normal action creators you have seen so far.// The actions they return can be dispatched without any middleware.// However, they only express “facts” and not the “async flow”.functionmakeASandwich(forPerson,secretSauce){return{type:'MAKE_SANDWICH',    forPerson,    secretSauce,}}functionapologize(fromPerson,toPerson,error){return{type:'APOLOGIZE',    fromPerson,    toPerson,    error,}}functionwithdrawMoney(amount){return{type:'WITHDRAW',    amount,}}// Even without middleware, you can dispatch an action:store.dispatch(withdrawMoney(100))// But what do you do when you need to start an asynchronous action,// such as an API call, or a router transition?// Meet thunks.// A thunk in this context is a function that can be dispatched to perform async// activity and can dispatch actions and read state.// This is an action creator that returns a thunk:functionmakeASandwichWithSecretSauce(forPerson){// We can invert control here by returning a function - the "thunk".// When this function is passed to `dispatch`, the thunk middleware will intercept it,// and call it with `dispatch` and `getState` as arguments.// This gives the thunk function the ability to run some logic, and still interact with the store.returnfunction(dispatch){returnfetchSecretSauce().then(sauce=>dispatch(makeASandwich(forPerson,sauce)),error=>dispatch(apologize('The Sandwich Shop',forPerson,error)),)}}// Thunk middleware lets me dispatch thunk async actions// as if they were actions!store.dispatch(makeASandwichWithSecretSauce('Me'))// It even takes care to return the thunk’s return value// from the dispatch, so I can chain Promises as long as I return them.store.dispatch(makeASandwichWithSecretSauce('My partner')).then(()=>{console.log('Done!')})// In fact I can write action creators that dispatch// actions and async actions from other action creators,// and I can build my control flow with Promises.functionmakeSandwichesForEverybody(){returnfunction(dispatch,getState){if(!getState().sandwiches.isShopOpen){// You don’t have to return Promises, but it’s a handy convention// so the caller can always call .then() on async dispatch result.returnPromise.resolve()}// We can dispatch both plain object actions and other thunks,// which lets us compose the asynchronous actions in a single flow.returndispatch(makeASandwichWithSecretSauce('My Grandma')).then(()=>Promise.all([dispatch(makeASandwichWithSecretSauce('Me')),dispatch(makeASandwichWithSecretSauce('My wife')),]),).then(()=>dispatch(makeASandwichWithSecretSauce('Our kids'))).then(()=>dispatch(getState().myMoney>42            ?withdrawMoney(42)            :apologize('Me','The Sandwich Shop'),),)}}// This is very useful for server side rendering, because I can wait// until data is available, then synchronously render the app.store.dispatch(makeSandwichesForEverybody()).then(()=>response.send(ReactDOMServer.renderToString(<MyAppstore={store}/>)),)// I can also dispatch a thunk async action from a component// any time its props change to load the missing data.import{connect}from'react-redux'import{Component}from'react'classSandwichShopextendsComponent{componentDidMount(){this.props.dispatch(makeASandwichWithSecretSauce(this.props.forPerson))}componentDidUpdate(prevProps){if(prevProps.forPerson!==this.props.forPerson){this.props.dispatch(makeASandwichWithSecretSauce(this.props.forPerson))}}render(){return<p>{this.props.sandwiches.join('mustard')}</p>}}exportdefaultconnect(state=>({sandwiches:state.sandwiches,}))(SandwichShop)

License