A step-by-step guide on using Redux Toolkit with React

Planning to Hire ReactJS developer? Your search ends here. See here Why Redux Toolkit over Redux? Redux patterns make states predictable, scalable, and easy to maintain due to the precise rule of how each unit in the redux flow should behave and work. However Redux comes with a few challenges: A developer has to write too much code to configure a store Too much code makes it hard to understand and less clean Too many packages need to be installed Writing reducers become more complex in Redux To overcome these challenges, the Redux team introduced Redux Toolkit which enables you write redux logic efficiently. Redux toolkit includes core redux packages with simple & clean redux code. How to use Redux Toolkit? Step 1: Install Packages

Install the required packages first in order to use Redux Toolkit and React-redux in your React application. npm install @reduxjs/toolkit react-redux Step 2: Create reducer and actions

In traditional redux, you may write actions and reducer functions separately just as shown below: Actions const INCREMENT = "INCREMENT"; const DECREMENT = "DECREMENT"; const RESET = "RESET"; export { INCREMENT, DECREMENT, RESET }; Reducer const intialState = { count: 0, }; const counterReducer = (state = intialState, action) => { switch (action.type) { case "INCREMENT": { return { count: state.count + 1, }; } case "DECREMENT": { return { count: state.count - 1, }; } case "RESET": { return { count: 0, }; } default: return state; } }; export default counterReducer; By using the Redux toolkit and createSlice, you may write better code with fewer lines.

Now, create a counterSlice.js file in the src/slice/ directory. The counterSlice file will look like this: counterSlice.js import { createSlice } from "@reduxjs/toolkit"; const counterSlice = createSlice({ name: "counter", initialState: { count: 0, }, reducers: { incrementCount(state) { state.count = state.count + 1; }, decrementCount(state) { state.count = state.count - 1; }, resetCount(state) { state.count = 0; }, }, }); export default counterSlice; export const counterSliceAction = counterSlice.actions; As you can see, the code is considerably better and understandable with less lines. It is not necessary to use switch case statements to manage actions with matching reducers. It also supported directly-assigning value to the state rather than returning the new value when updating the state. Step 3: Create and initialize the store Next, create a store.js file in the src directory of the project. The store holds the state of our application. To create a store, first you should import the configureStore from the redux-toolkit package.

Here the createStore in redux is replaced by configureStore. configureStore not only creates the store but also accepts reducer functions as an argument and automatically installs the Redux DevTools extension for debugging. import counterSlice from "./slices/counterSlice"; import { configureStore } from "@reduxjs/toolkit"; const store = configureStore({ reducer: { count: counterSlice.reducer, }, }); export default store; Here counterSlice reducer is imported from counterSlice.js and passed it to configureStore. Step 4: Provide the store to React application

Once done with creating the store, import the React-redux Provider and pass the store as a prop. This allows you to access the store from any component of your React application. import React from "react"; import ReactDOM from "react-dom/client"; import { Provider } from "react-redux"; import App from "./App"; import store from "./store"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); Step 5: Dispatch actions from the react component Now, create a Counter.js component in the src directory. And import the useSelector and useDispatch hook from the react-redux. Note: useSelector hook is used to read data from the store & useDispatch hook is used to dispatch or trigger an event.

Also, you need to import actions from counterSlice.js to trigger an event. import React from "react"; import { useDispatch, useSelector } from "react-redux"; import {userSliceAction} from "./slices/counterSlice" Now initialize the useDispatch and useSelector hook in a counter component. Here you may get the value of count using the useSelector hook and dispatch the event when the user clicks the increment, decrement, and reset button.

When a user hit one of these buttons, an event is fired in the counterSlice reducer based on the action's count update value. const Counter = () => { const count = useSelector((state) => state.count.count); const dispatch = useDispatch(); return ( <>Counter App Using Redux Toolkit {count} dispatch(counterSliceAction.incrementCount())}> Increment dispatch(counterSliceAction.decrementCount())}> Decrement dispatch(counterSliceAction.resetCount())}> Reset </> ); }; export default Counter; Here is the final output of your Redux toolkit-powered counter react application. Figure 2 Counter application using Redux Toolkit That’s it for this tutorial, stay tuned with iFour Technolab for more interesting and informative blogs. Read More: A complete guide on React fundamentals: Props and State Conclusion Redux enables developers to write simpler, more legible code while maintaining the redux in the appropriate flow and pattern. For beginners and developers, the Redux toolkit is a great option to reduce the amount of boilerplate code in Redux. In this blog, we discussed how Redux works, its limitations, and why you should use Redux Toolkit instead of Redux. We also learnt how to utilize the redux toolkit in a React project and develop redux code in a single file, including reducers and actions.