Setting up Redux Toolkit with ReactJS

Why Redux?

Redux is a valuable asset for managing the global React state. Passing down props can become a real headache very soon when you have lots of components down the stack and forget a single one.

SOURCE - GOOGLE

Redux toolkit architecture is to break each functionality into feature slice, In our Redux Toolkit, our store is more like a pizza, our “slice” is like a slice of pizza and all the slices make up our store. This is called the “Ducks” pattern (re — dux) so each feature is stored in a separate folder.

Setting up Redux for your application

• Step 1

We will create a project based on create-react-app.

$ npx create-react-app "project-name"
or
$ yarn create-react-app "project-name"

We can simply run the application by,

$ npm start
or
$ yarn start

• Step 2

We install redux with -save-dev flag so that it is added to our package.json file.

$ npm i redux --save-dev
or
$ yarn add -D redux

• Creating a Slice🍕

Create a file for a slice that can be named anything(test.slice.js). In this file, we’ll be defining all the reducers for a particular slice of the store.

Let’s start by importing the createSlice function from the thunkAP

// src/features/test/test.slice.js
import { createSlice } from '@reduxjs/toolkit';

After we import the createSlice function, we'll configure the slice as below

const testSlice = createSlice({
  name: 'test',
  initialState,
  reducers: {
    otherAction: (state, action) => ({
      ...state,
      otherProperty: action.payload,
    }),
    // ...
    finalAction: (state, action) => ({
      ...state,
      otherProperty: action.payload,
    }),
  },
  extraReducers: {
    [someAction.fulfilled]: (state, action) => {
      state.someProperty = action.payload;
    },
  },
});
export const { otherActions, finalAction } = testSlice.actions;
export default testSlice.reducer;

Here, the name is used to generate actionTypes . The initialState is the initial state of the slice, and the reducers are the different reducers that you have to dispatch later on. The lifecycle reducers can’t be passed to the reducers in createSlice(), hence they've to be passed in the extraReducers

• Creating a Store

We have created the slice and reducers but we won’t be able to use them until we configure the Redux store.

Create a new folder src/app and create a new file named store.js in it, here we'll set up the Redux store as follows

import { configureStore } from '@reduxjs/toolkit';
import testReducer from '../features/test/test.slice';
export const store = configureStore({
  reducer: testSlice.reducer,
});

Note: Naming of the slices in the reducer field will matter later on when you’ll access the values. In this case, if we want to access the test value we'll have to write state.test.value, if the testReducer was named something else then you'll access it using that key like state.someKeyValue.value

Now we’ll be passing the store in the Provider so that the entire application can have access to the store contents.

• In main.jsx import the Provider and the store and wrap the App in the Provider and pass the Redux store to the Provider as a prop.

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import { store } from './app/store';
ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

And hence, we’ll be able to use the store values in the other files by using the following,

import { useDispatch, useSelector } from 'react-redux';
import { otherActions, finalAction } from './features/test.slice.js
const dispatch = useDispatch();
const test = useSelector((state) => state.test.value);
someHandleFunction = () => {
    dispatch(otherActions());
}

By using the Redux Toolkit you can write all the code you’ll need for your Redux store in a single file as well, including actions and reducers, in a much more readable way and an easy way to manage states.