Introduction:
This blog explains how you can build an application using the react-redux with a redux toolkit. This is the modern React Redux tutorials with the Redux toolkit.
Things are changing in front-end application development. What we have been using to develop a front-end application is frequently switching to build things faster and more efficiently. One of them is redux, which handles high-frequency state updates. But, we have to admit that redux is a popular library among them.
So, what changed in redux? Well, we will see this in the article.
The core concepts of redux remain the same. But the way we implement things is changed in that the react-redux environment. With a package called redux-toolkit, we can implement redux in our react application smoothly.
Let’s see how to use redux-toolkit to build a react-redux application.
Why choose redux-toolkit?
Redux is a good fundament for new learners to simplify working it is recommended to use the Redux Toolkit. Redux toolkit was created to help address three common concerns about Redux:
- Configuring a Redux store is too complicated in Redux.
- I have to add a lot of packages to get Redux to do anything useful.
- Redux requires too much boilerplate code.
It includes several utility functions that simplify the most common Redux use cases, including store setup, defining reducers, and immutable update logic with Immer, and even allows creating entire “slices” of state at once without the need to write action creators.
It comes as a pre-configured bundle of the most widely used Redux add-ons, like Redux Thunk for async logic and reselects for writing selector functions, so that you can use them right away. It also allows you to overwrite all of its settings, for example, it’s very easy to use redux-saga or any other middleware with it.
Core Concepts of Redux toolkit
There are some important changes in the redux toolkit, let’s look at one of them
configureStore
we all know that the redux store(createStore) handles the actions and reducer in redux. well, configure store is a wrapper around createStore with some default configuration options. It simplifies some configuration pains.
createAction
createAction returns an action creator function. In this function, one important change to note that, here is that we return an action creator function, not an object. in the old traditional way, it returns an object with type and payload. Here, we return a function.
createReducer
Let me show two versions of code, see and think which one is easier to manage.
Let’s look at another version of code e
Can you notice the difference? Well, that makes a lot of difference when your application grows. it will be easy to maintain in the later version.
createReducer takes initial state and action creator functions and uses a concepts lookup table which takes the object key and compares it with action creator and matches with the reducer. This way, you don’t need to manually write an if-else or switch case state to manage it.
createSlice
If you think, createSlice trimming down from writing tonnes of code. Well, there is more. This will provide an option to generate action creator and action types. The only need to specify the reducer function, initial state, and name for the slice and createSlice take care of everything for you.
