Setup a Redux Application using createAsyncThunk and React
Today we will talk about how to create a React application with Redux thunk. Except…with a twist.
In fact, I have created an article on how to setup redux-thunk on a React application here: How to Set Up Redux-Thunk in a React Project | by Michael Tong | JavaScript in Plain English
If you have gone through this tutorial or any other react redux tutorial in general, you will realize configuring redux store is quite a bit of hassle and a lot of boilerplate. After the installation, you have to write a lot of complicated code in order for the application to be enabled to interact with the store properly(mhm action creators).
You have probably seen code like this:
or this:
Yuck. This looks so intense to digest and read.
What if I tell you there is another tool we can use that does all this redux magic without all the boilerplate of configuring the store?
With redux toolkit, you only have to worry about a few things:
- configureStore setup
- createSlice(which combines reducers, action, state into one function)
- createAsyncThunk(which take a redux string that specifies the action to dispatched and returns a promise)
And that’s it! Now let’s set it up from scratch.
Step 1: create a react project via the following: npx create-react-app reduxtoolkitapp
Step 2: Afterward, install the two following packages for redux: npm install — save-dev react-redux @reduxjs/toolkit
Under your src folder, create a folder called store. Inside this folder, create a file called reducerConfig.js with the following content:
As usual, we combine all the reducers we will be using into combineReducers. In our case, our reducer will be in the form of a slice, with state and action combined as function.
Step 3: Under the src folder, create a folder called redux. Inside the same folder create a ToDoSlice.js file with the following content:
Step 4: Inside the same redux folder, create a file called thunk.js:
Inside ToDoSlice.js, we have a name, which is used to identify the name of the reducer. We also have a state and a list of reducer functions, which is addToList and deleteFromList.
Note there is something called extraReducers. You can probably guess what is it doing but wait a minute…what was extraReducers in older implementation of redux?
Answer is…there isn’t. In fact, what these extraReducers are doing is allowing us to perform some callbacks during different stages of dispatch calls.
For example, when addItem action is being dispatched here, it calls addItem.pending. When we declare builder.addCase for addItem.pending, we also declare the callback to be called when that occurs, which is the startSubmitting method.
This startSubmitting method will only get called when a createAsyncThunk with name of “Todo/addItem” is being dispatched, as seen in addItem function in thunk.js.
Once the thunk gets dispatched callback of addItem.fulfilled get called. NotSubmitting gets triggered and turn isModifying flag back to false.
What if an error is thrown when the action is being dispatched? In that case, the callback set to addItem.rejected will be called and in our case it will also set isModifying flag to false as well, indicating the process is not running anymore.
To make all this work, we still have to wrap our application with a provider and the store.
Step 5: Go to src/index.js and replace with the following content:
Here, we simply import the store we created in the reducerConfig file and wrap the application around it.
We just finished setting up redux toolkit. Let’s modify app.js and see how we can use it.
Step 6. Go to src/app.js and replace with the following content:
Over here in the return state, we have a place to add item name and a place to render the list of items in the store. When the user add an item, it will dispatch that action and put the new item into the redux store.
Likewise, for every item that’s being rendered, there is a button that allows the user to delete the respective item.
When we click on add item, callback of addItem.pending get called to change loading state to true. When the dispatch action is done, callback of addItem.fulfilled is called, changing the loading state back to false.
Of course, if the addItem dispatch call fails, callback of addItem.rejected get called instead.
That’s it! You just created an application with redux-toolkit functionality.
More content at plainenglish.io
