Boost Your Productivity with Redux Toolkit (RTK) in React JS/Next JS

Redux Toolkit is a powerful and user-friendly library that simplifies state management in React applications, allowing developers to focus on building their apps rather than worrying about managing complex state interactions

Why do I say that? Because I’m also just like you searched for the correct way to implement RTK in my project but was unable to get any easy, simplified approach. After lots of struggle, I found the right way of implementing RTK in my project, so I’m here to share my learning with you.

Enough of the talk, let’s dive into the coding part. 🌊🏊‍♂️

First things First, I hope you know how to create a React/ Next project so I’m skipping those steps and getting directly to the point. Here I used NEXT JS 13 application since CRA is dead - officially .

1.) Install the necessary dependencies

npm install react-redux
npm install @reduxjs/toolkit

2.) Create a folder named “store” in your project’s root directory

3.) Inside that directory create a file named “store.js” which will act as our centralized store for state management.

4.) In “store.js” import ‘configureStore’ from Redux Toolkit

//store.js

import { configureStore } from "@reduxjs/toolkit";

5) Create a new Redux store called “store” as the variable name and use configureStore function to add your reducers. As of now enter the code below, then we can create some reducers and get back here.

// store.js

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: {
    // your reducers here
  },
});

6.) We can create multiple slice reducers based on our needs and functionality and add it to the reducer object of ‘store.js’ . Here I will create a slice reducer of user details and export it to the store.

Create a file called ‘userSlice.js’ under the “store” directory where we will save the state variables of username and password entered by the user.

// userSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    user: '',
    password: '',
}

const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
        setUser: (state, action) => {
            state.user = action.payload;
        },
        setPassword: (state, action) => {
            state.password = action.payload;
        }
    }
});

export const { setUser, setPassword } = userSlice.actions;

export default userSlice.reducer;

• Import the ‘createSlice’ from redux toolkit libaray.

• Create a variable called initialState and set the initial values. Here user, password are assigned with ‘ ’ empty strings as initial values.

• Now create a Redux Slice using createSlice function with the name, initial state, and reducers (setUser, setPassword).

• Each reducer takes in a ‘state’ object and an ‘action’ object.

• ‘setUser’ sets the ‘user’ state to the ‘action.payload’ (which is passed in when the action is dispatched).

• ‘setPassword’ sets the ‘password’ state to the ‘action.payload’

• The ‘export’ statement exports both the ‘setUser’ and ‘setPassword’ actions as named exports, and exports the ‘userSlice.reducer’ as the default export

7.) Now let’s import the ‘userSlice’ to the store and use it in our reducers object. The final code in ‘store.js’ will look like this with our ‘store’ exported.

// store.js

import { configureStore } from "@reduxjs/toolkit";
import authSlice from "./authSlice";

const store = configureStore({
  reducer: {
    auth: authSlice,
  },
});

export default store;

8.) Now we need to import our store and pass it to the Provider, then wrap ouraround the ‘App’ component in REACT/ <Component {…pageProps} /> in terms of NEXT JS. So the code in the ‘App.js’ or ‘_app.js’ component will look like below.

// _app.js

import { Provider } from 'react-redux';
import store from '../store/store';

function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

That’s it, you have successfully integrated REDUX TOOLKIT to your REACT/ NEXT application.

Tada 🧙‍♂️🎇It might sound/ look hectic at the beginning, but trust me using REDUX straightforward is much more complicated than this and that’s why REDUX became legacy code and RTK came into the picture. Try using this a few times and trust me the learning curve of RTK will become much smoother.

Is it useful?! Give this a clap and share it with your friends, do follow for more content.

See you in the next article, Happy Coding! 👨‍💻❤