redux-toolbelt: Supercharge Your Redux
In this article we will show the strength of
redux-toolbelt and what it can do for you and look at the API of
redux-toolbelt and how to use it.
Before we dive into the features of
redux-toolbelt, here is a short example of vanilla Redux code converted to
The following vanilla Redux code consists of one action and a reducer that handles it:
Now lets convert it to the equivalent code in redux-toolbelt:
A live sandbox of the demonstration is available here So you can play around with redux-toolbelt while reading this article.
And here is The github repository of the demonstration.
Lets dive into the code now:
Creating actions via redux-toolbelt is much simpler and shorter.
First, lets look on how action creators are created in vanilla Redux:
Now, lets create the same action creators using redux-toolbelt:
That’s it, with a line of code, your action creator is ready for use.
You don’t have to save the action’s names in a separate constants file, instead the name of the actions is saved on the created toolbelt action creator itself.
When you execute the action creator, the action creator’s payload and metadata are passed as the action’s first and second arguments.
Now, instead of importing action types from a constants file in the reducer, we now import the action creators directly. actions type will be found on the
TYPE property of every action creator.
makeReducer creates a simple reducer to handle action creators that were created using
For example, lets create an action creator:
Then lets import the newly created action creator and create a reducer to handle it:
makeReducer accepts 3 arguments: action creator, action handler, options.
In the example above we use defaultState to ensure the initial state of countReducer is 100.
Now lets take a look at countReducer and see how handles increaseBy dispatches:
redux-toolbelt’s asynchronous actions and reducers creators simplifies and shortens the code and boilerplate required to implement common async redux scenarios.
makeActionCreator creates, in one line of code, multiple actions that represent the different stages of an async process.
It is all the more useful in async/side effects middlewares like
Let’s see an example of how the it is created and used:
As you can see, the redux-toolbelt’s async action creator holds sub actions for each step in the asynchronous process lifecycle (request, success, failure, progress and cancel).
We can now import the action creator directly to reducers.js to get it’s different action types.
As opposed to what you just saw, in vanilla Redux, every action is verbosely defined by it’s own and their only connection is by convention.
And now… The magic begins:
Creates a reducer that handles async action creators we discussed in the last section with
Lets see an example:
The last line of code creates the same reducer like the one we saw in the previous example, that handles all the actions that are omitted during the fetch profile asynchronous process:
In redux toolbelt all the life cycle of an asynchronous process in defined using one async action creator, and handled using (usually one) async reducer.
makeAsyncReducer options configure the reducer for more advanced scenarios.
Using another set of options, we spread the results of the process on success and do not destroy data on process start:
makeAsyncActionCreator is great,
makeThunkAsyncActionCreator makes it awesome.
It creates an async action creator from a promise, so with a line of code you get the
fetchTodosFromServer ready to be executed when the
fetchTodos action is called and
fetchTodosFromServer.failure executed upon promise resolving.
Currently the holy grail of the library. It helps us in many cases and best used in a combination with the functions described before.
composeReducers runs its reducers one by one, top to bottom. If an argument is an object it combines them.
So in the following example, a reducer that handles logging out, runs after the three combined reducers
orders and resets all the three states.
Again, the initial state the reducer produces is:
After login and all data fetching:
And when the user clicks on logout all the states are reset to
This demonstrates how
composeReducers helps you to easily affect several states at once.
redux-toolbelt provides us with a fast and easy way to create actions and reducers that follow the most commonly used patterns in redux.
It also provides us with a way to work on a combination of states that each of them has it’s own reducer.