redux-toolbelt: Supercharge Your Redux
10x less code, 10x more redux power - part 2 - the basics
--
In the first article, we introduced redux-toolbelt in general.
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.
Example
Before we dive into the features of redux-toolbelt
, here is a short example of vanilla Redux code converted to redux-toolbelt
.
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:
Live Sandbox
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:
makeActionCreator
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
makeReducer
creates a simple reducer to handle action creators that were created using makeActionCreator
.
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:
Async Support
redux-toolbelt’s asynchronous actions and reducers creators simplifies and shortens the code and boilerplate required to implement common async redux scenarios.
makeAsyncActionCreator
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 redux-thunk
, redux-saga
or redux-observable.
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:
makeAsyncReducer
Creates a reducer that handles async action creators we discussed in the last section with makeAsyncActionCreator.
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.
The makeAsyncReducer
options configure the reducer for more advanced scenarios.
makeAsyncReducer with the defaultData and dataGetter configs.
Using another set of options, we spread the results of the process on success and do not destroy data on process start:
makeThunkAsyncActionCreator
While makeAsyncActionCreator
is great, makeThunkAsyncActionCreator
makes it awesome.
makeThunkAsyncActionCreator
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.success
and fetchTodosFromServer.failure
executed upon promise resolving.
composeReducers
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 profile
, customers
and 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 data: null
.
This demonstrates how composeReducers
helps you to easily affect several states at once.
Conclusion
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.
Also, in the next parts we will discuss how redux-toolbelt-immutable-helpers, redux-toolbelt-observable, redux-toolbelt-saga can improve your life even more.