Who’da Thunk it, thunk with redux-toolkit

As we know as Javascript developer or React Developer specifically, we rely on redux for state management,I know there are a lot of other options but redux still the most popular one between them.

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.

Let’s started

#1: Installation

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 extraReducers

Second is passing an extraReducers as function with builder argument.

for example:

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 react-redux

After that you implement your function in componentDidMount or 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)

Thunk middleware with redux-toolkit


See you next time, happy coding….



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mustafa Alroomi

Mustafa Alroomi

Developer | mustafaalroomi.com | Owner of codereview channel youtube.