Slicing Redux in ReactJS
By: Arnold Parge
Tags: React, Web App Development, Software Development, Redux, Flux

How to use the slice in react-redux

Slicing Redux in ReactJS

Overview

When I started using redux in react, I felt it is a bit overkill for an ideal web app. I had to manage multiple files for each module. There was so much code that was almost the same and had to write it for every module, and I always thought that if we have to anyways write the same code repeatedly then why was it not handled by redux? When I learned about createSlice I felt my prayers were finally heard.

What is createSlice

createSlice comes with the package redux-toolkit. 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.

How createSlice works?

Create a Redux store with configureStore

a. configureStore accepts a reducer function as a named argument

b. configureStore automatically sets up the store with good default settings Provide the Redux store to the React application components

a. Put a React-Redux <Provider> component around your <App />

b. Pass the Redux store as <Provider store={store}> Create a Redux “slice” reducer with createSlice

a. Call createSlice with a string name, an initial state, and named reducer functions

b. Reducer functions may “mutate” the state using Immer

c. Export the generated slice reducer and action creators Use the React-Redux useSelector/useDispatch hooks in React components

a. Read data from the store with the useSelector hook

b. Get the dispatch function with the useDispatch hook, and dispatch actions as needed

Let's see it in action

My src folder looks like this

First, create a module slice using createSlice. In the reducers attribute of the createSlice function add functions that will hold the business/domain logic.

Creating a slice instance using createSlice function

Export the reducer that you’ll get from the instance of Slice.

Exporting reducer from a slice

Import the reducer and pass it in the global store reducer while creating the store using configureStore.

Now that you have a store ready, you can use it in your app passing it to a provider and wrapping the root component of the app by that provider.

The Provider will make the store available to each component at every level inside the App component. Now, we will use the store in the Counter component. First, you’ll need to get the value from the store using useSelector hook

We can use this count variable directly to display the count. Now, we’ll update the store and for that, we’ll need action which can be exported from the slice instance.

Import these actions in the component and dispatch the action you want using the hook function useDispatch. The useDispatch function returns an instance of the type Dispatch.

That’s it! You can see how Slice creates reducers and actions for us which takes less time and less code as compared to the traditional Redux architecture. We now know how to create a store, use the data to display and update the data. This was the most basic example so that everyone can understand the use of Slice in ReactJS.

If you wish to know more about react, redux or slice then let me know in the comments.