How to Setup Redux ToolKit in React? – Devstringx
ReduxToolkit
Redux Toolkit is the officially recommended approach for writing Redux logic. It will help us to simplify, Redux development. Redux Toolkit also includes a robust data fetching and caching capability called RTK Query. It’s included in the package.
Redux toolkit is a npm package that is made to simplify the creation of a redux store and provide easy state management. Before the introduction of the Redux toolkit state management was complex in simple redux.
Steps to Setting up Redux ToolKit in React
Below we shared 05 easiest ways that will help you to quickly setup Redux ToolKit in React
1) Installation
Start by installing the packages:
Npm install @reduxjs/toolkit react-redux
2) Create Slice
- Create a Redux “slice” reducer with createSlice
- Call createSlicewith a string name, an initial, and named reducer functions
- Reducer functions may “mutate” the state using Immer
- Export the generated slice reducer and action creators
3) Create a Redux Store
Create a Redux store using Redux Toolkit:
It will create the instance of the Redux store by just accepting a named object to automatically set up the Redux DevTools extension.
4) Provide the Redux Store to React
- Create a Redux store with configure Store
- Configure Store accepts a reducer function as a named argument
- Configure Store automatically sets up the store with good default settings
5) Use Redux State and Action in React Components
We can read the state and update it using the UseDispatch and UseSelector provided by ReactJS-Redux Hook
- Use the React-Redux use selector/useDispatchhooks in React components
- Read data from the store with the useSelectorhook
- Get the dispatch function with the use dispatch hook, and dispatch actions as needed
The example code above uses the Redux Toolkit to change the New User of a ReactJS application. The images below are the results of the execution. In these images, we can handle state management easily with the Redux Toolkit.
When we click the “Add New User” button, it will dispatch an action and trigger the reducer function “data show on screen” to update the state of “data change” (which is the initial value) ” The reducer method “Change Data” a string type, takes an action payload. We pass it as an argument to that function. When the state is changed, the component will be re-rendered. Therefore, in the UI, Change data is shown. We click the Delete button then the data is deleted from the state.
Conclusion
Redux Toolkit eliminates the need to write logic by hand, prevents common mistakes, and simplifies the standard Redux tasks. Using the Redux Toolkit removes some of the complexity in setting up Redux in our React Application. We don’t need to write repetitive code. Moreover, the state, action, and reducer are placed in the same file. When we code in the same file with fewer lines of code, it will be more efficient and make maintenance much easier.
Related Post:-
