Who’da Thunk it, thunk with redux-toolkit
And that makes developers go creative about creating more comfortable, esaiable and maintainable projects, one of them is redux-toolkit.
Redux-toolkit makes it easy to create store, configure it with middlewares and connect actions to reducers without a lot of typing and files everywhere.
Fact: The last project I was working on, has 70 reducers and same for api reducers
(Note: if you’re not familiar with redux, I suggest to take look at it otherwise this will be Chinese for you).
In short I would like to describe one part which is Handling Async Requests using Redux Thunk Middleware with redux-toolkit.
Async calls are the way to communicate between client and server side, and retrieve data, you could do that with redux but it gets really silly later if you want to modify you actions that’s thunk fix this problem.
I suppose that you know how to create react app, and installing some dependencies that we need it for connect app to redux.
npx create-react-app my-app — template=typescript
yarn install @reduxjs/toolkit react-redux
// Typing if you’re using Typescript
yarn add -D react-redux
#2: Configure Store
For creating store it more straightforward we just need to import configureStore for our package
You see I have also installed create-logger, you don’t have but nice to see your logs.
rootReducer will be the combined reducers which is simply:
#3: Create Todos State
You see above I have implemented todoReducer, this should be created like this:
This is simple reducer flow in redux-toolkit. now implementing the thunk.
#4: Thunk-middleware implementation
Now comes the interesting part where all this article about.
First we need to know what thunk middleware is?
Redux Thunk is a middleware that lets you call action creators that return a function instead of an action object. That function receives the store’s dispatch method, which is then used to dispatch regular synchronous actions inside the body of the function once the asynchronous operations have completed.
Please take a look at the repository of redux thunk code, you’ll surprised what is inside.
when it comes to thunk we could simply implement any middleware with redux-toolkit but it provides automatically with thunk but under another name and small changes.
createAsyncThunk is our function we need to implement. see below:
So createAsyncThunk takes three params:
First the name of your action creator.
Second is a async function that will handle the request and return the result.
Third is optional that’ll any data you want to pass.
You might ask how can I post data? Well that’s pretty simple also in this example I will use types to make you more aware of all typings.
That’s will how to post data, doesn’t matter witch api client you use, you might be integrating api client with your redux store witch also preferable.
#5: Integrate With Redux
Now we have our action we just need to register in Todos-reducer as an action-creator, there are tow ways to implement our action in reducer first by using an Object defined as
Second is passing an
extraReducers as function with builder argument.
That’s it.we are done from Redux configuration we just need now to test it
I suppose that you know how to connect a component with Redux using
After that you implement your function in
useEffect for hooks and call it just like that:
With that you good to go (be creative).
Thank you for following me(Do it 😈).
Don’t forget to check my page for more articles, also I have a YouTube Channel for more tutorials you could check it out and follow it(pls)
See you next time, happy coding….