DEV Community

Cover image for State Management: Redux Toolkit + React JS
ramadhan.dev
ramadhan.dev

Posted on

State Management: Redux Toolkit + React JS

Redux Toolkit simplifies global state management in React applications. In this article, we’ll explore how to implement an authentication system using Redux Toolkit, including store configuration, slices, and async actions with thunks.

1. Configuring the Redux Store
The Redux store is configured using configureStore. In app.tsx, we set up a global reducer, middleware, and enable developer tools for debugging.

import { lazy } from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from "react-redux";
import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { rootReducer } from './slice';
import { setupAxios } from './_metronic/helpers/Axios';
import axios from 'axios';
import { thunk } from 'redux-thunk';

setupAxios(axios);

const AppRoutes = lazy(() => import('./routers/AppRoutes'));

const store = configureStore({
  reducer: combineReducers({
    masterState: rootReducer,
  }),
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),
  devTools: true,
});

createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <AppRoutes />
  </Provider>
);

Enter fullscreen mode Exit fullscreen mode
  • setupAxiosinitializes Axios with any required configuration, such as request interceptors.
  • combineReducersmerges multiple reducers, keeping the application modular.
  • Providerwraps the app to make the Redux store accessible throughout.

2. Creating the Root Reducer
The root reducer manages global state by combining different slices. Here, we include an auth slice for authentication.

import { AuthReducer } from "#/modules/auth/store/auth.slice";
import { combineReducers } from "redux";

export const rootReducer = combineReducers({
  Auth: AuthReducer,
});
Enter fullscreen mode Exit fullscreen mode

The Authslice handles authentication-specific state, which is defined using createSlice.

3. Defining the Authentication Slice
Using createSlice, we define the state structure, synchronous reducers, and extraReducers to handle async actions.

import { createSlice } from "@reduxjs/toolkit";
import { AuthState, initialAuthState } from "../model/authModel";
import { setLocalStorageData } from "#/_metronic/helpers/localstorage/accessToken";
import { AUTH_KEY, REFRESH_KEY } from "#/_metronic/helpers/env";
import { login } from "./auth.asyncAction";

const initialState: AuthState = initialAuthState;

export const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(login.pending, (state) => {
        state.loading = true;
        state.error = undefined;
        state.isSubmitting = true;
      })
      .addCase(login.fulfilled, (state, action) => {
        const { payload }: any = action;
        if (payload?.status === 'Error') {
          state.error = payload?.message || payload;
        } else {
          state.success = true;
          state.isLogin = true;
          setLocalStorageData(AUTH_KEY, payload?.api_token);
          setLocalStorageData(REFRESH_KEY, payload?.refreshToken);
        }
        state.loading = false;
        state.isSubmitting = false;
      })
      .addCase(login.rejected, (state, action) => {
        const { payload }: any = action;
        state.loading = false;
        state.error = payload?.data || payload;
        state.isSubmitting = false;
      });
  },
});

export const { reducer: AuthReducer } = authSlice;
Enter fullscreen mode Exit fullscreen mode
  • Initial State: Defines properties like isLogin, loading, and error.
  • extraReducers: Handles async actions (pending, fulfilled, rejected).
  • Token data is saved to localStoragefor managing user sessions.

4. Creating Async Actions with createAsyncThunk
The login async action interacts with an API to handle user authentication.

import { createAsyncThunk } from "@reduxjs/toolkit";
import { doLogin } from "../api/auth_api";

export const login = createAsyncThunk('login', async (payload: any, { rejectWithValue }) => {
  try {
    return await doLogin(payload);
  } catch (error: any) {
    return rejectWithValue(error?.data || error);
  }
});
Enter fullscreen mode Exit fullscreen mode

The action calls the API and processes responses or errors with rejectWithValue.

5. Creating the Authentication API
The API layer uses Axios to communicate with the backend. Here's the implementation for the login request.

import axios from 'axios';
import { ILogin, UserModel } from '../model/authModel';
import { BASE_URL } from '#/_metronic/helpers/env';

export const AUTH_URL = `${BASE_URL}/auth`;

export const doLogin = (payload: ILogin) => axios.post<UserModel>(AUTH_URL, payload);

Enter fullscreen mode Exit fullscreen mode
  • AUTH_URLspecifies the authentication endpoint.
  • doLoginsends a POSTrequest with user credentials and returns the server's response.

With Redux Toolkit, managing global state becomes streamlined, especially for handling complex workflows like user authentication. By breaking the implementation into smaller modules (store, slice, and API), we ensure scalability and maintainability in our React applications.

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay