Redux Toolkit — The Complete Guide (2022)
Including React, Typescript and Redux-saga.
Introduction
Redux Toolkit is a powerful toolset for efficient Redux development. Especially when you use Typescript in your project. Because we all know how many lines of extra code we get when we want to typinize our redux-store. This becomes a big problem when your project gets huge and it becomes impossible to maintain so much useless code in working order. All these typing problems are solved by the Redux Toolkit, and I’ll show you how! But even if you do not use Typescript in your project, you can also learn a lot for yourself and in general, your code will be reduced by more than 50%.
Also in this example I will show you how to successfully connect redux-saga so that it all works together like a Swiss watch. I don’t really like the redux-thunk, I think that redux-saga is not a very difficult thing, and it should be used even on small projects. If you have never worked with it, I advise you to read the article to the end and I promise that you will understand everything and be surprised at how easy and convenient it is to use.
Before we start, i shared the source code:
Installing packages
# npm
npm install react-redux @reduxjs/toolkit redux-saga# yarn
yarn add react-redux @reduxjs/toolkit redux-saga
Creating store
ConfigureStore is an improved and advanced version of the standard Redux createStore. It has DevTools enabled by default, and also has a built-in redux-thunk middleware, which we disable, and will use redux sagas instead. I also recommend disabling DevTools on production build.
Creating slices
What is createSlice? It is a function that accepts an initial state, an object full of reducer functions, and a “slice name”, and automatically generates action creators and action types that correspond to the reducers and state.
CreateSlice also accepts extraReducers. I’ll tell you about them when we create actions. For now, consider this an analogue of a regular reducer, only which accepts any action, not just the actions of its slice.
Simply put, slice is the common place for reducers and actions. Let’s see:
Note: Redux Toolkit’s
createReducerandcreateSliceautomatically use Immer internally to let you write simpler immutable update logic using "mutating" syntax. This helps simplify most reducer implementations.
Creating actions
In the previous section, where we created slices, we created reducers and actions inside them. And it is quite logical to ask the question: why do we need a separate file with actions, if we already have them? The answer is simple: actions in slices are only needed to change the value of a particular reducer. Here we will create 2 types of actions:
1) Actions for calling sagas. Everything is simple here, we will call them in the body of the component to trigger our sagas.
2) Actions for extraReducers. This is an action that, when called, will change values in many reducers. This is how it differs from a regular action in a slice, which can only change the value of its own reducer.
Creating sagas
Saga is a generator function that helps to organize side effects (HTTP requests to external services, accessing browser storage and executing I/O operations) in a way that is easier to manage.
It takes in the action, from which we get the payload. This gives us the ability to throw a props object from a functional component and use it in our saga. In this case, the saga makes the api request for an external resource, and sets the response to the ‘posts’ reducer.
Providing the redux-store to our react app
Connecting Redux to Components with useActions and useTypedSelector
UseActions
We create a hook and return from it the result of executing the bindActionCreators, into which we throw our actions and dispatch.
UseTypedSelector
This is the same as the useSelector, but only typed. With its help, we do not need to write in each component types for each property that we get from the store. Everything will happen automatically, and in the next section I’ll show you that.
Main Functional Component (App.tsx)
This is our main component. In it we connect our hooks. We connect typed actions on the 9th line, we get the typed state from the store on the 11th line. Notice, that everything is typed here. Then we call these actions in specific places as we need. The main advantage of my approach to working with the Redux Toolkit is that we do all the typing outside the functional component. Please note that we do not have any hint of types in the body of the component, but if you try to throw another type into the action, you will get an error. In this example, typing works perfectly.
Conclusion
I hope that I was able to explain to you how to build a correct and typed work with Redux Toolkit. Check please out the source code if you have any questions.
