Redux Integration: Enhancing Your Node.js and React CMS

We've reached the next crucial milestone in building our CMS: configuring Redux, which we installed in the previous step. Before we dive into the configuration process, it's important to address a fundamental question: Why do we need additional storage on the front-end side? In modern web applications, especially complex ones like content management systems, managing state becomes increasingly challenging as the application grows. While React provides a local component state, it can become cumbersome to pass data between deeply nested components or share states across unrelated parts of the application. This is where Redux comes in. Redux offers a centralized store for all the states in your application. This centralization brings several benefits: Single Source of Truth: All your application state is stored in one place, making it easier to understand and manage. Predictable State Updates: State changes become more predictable as they follow a strict unidirectional data flow. Improved Debugging: With tools like Redux DevTools, you can easily track state changes over time. Performance Optimization: By avoiding unnecessary re-renders and simplifying data flow, Redux can help improve your application's performance. Persistence and Hydration: Redux makes it easier to persist and rehydrate the state on page reload, which is crucial for a robust CMS. Now that we understand the 'why,' let's proceed with configuring Redux in our Node.js and React CMS. We'll walk through the setup process step-by-step, ensuring our application is prepared to handle complex state management efficiently. 1. Add "createAction" Helper Util The "createAction" utility function simplifies the process of creating action objects in Redux, promoting consistency and reducing boilerplate code throughout your application. Abstracting the action creation process ensures that all actions follow the same structure (with type and payload properties), which makes debugging easier and helps maintain a predictable state shape. This utility function also makes it easier to refactor action creators in the future, as any changes to the action structure can be implemented in one place rather than scattered throughout the codebase. So let's add a new "utils" folder inside the "admin" root folder. Create a new "reducer.utils.js" file, from which we will export the "createAction" helper: export const createAction = (type, payload) => ({ type, payload }); And that's it, now we can move to the store itself. 2. Structuring "Redux" Store create a new "store" folder inside the "admin" root; add a new "store.js" file, which will store all configures and accumulate separate stores; import "configureStore" function that will create a main store, with reducer as object parameter; just for beginning, we will create our first "auth" store; import { configureStore } from '@reduxjs/toolkit'; import { authReducer } from './auth/auth.reducer'; export const store = configureStore({ reducer: { auth: authReducer } }) create a new "auth" folder inside the "store" folder; add new "auth.reducer.js", "auth.action.js", "auth.selector.js", "auth.types.js" files. This will be our typical store structure. Our "auth" folder will contain data for authentication, "posts" for example will be created for our posts, etc... inside the types file we will create the first "SET_USER" action type that will define an action that will update the user state inside the reducer; const AUTH_ACTION_TYPES = { SET_USER: 'auth/SET_USER', }; export default AUTH_ACTION_TYPES; reducer file will contain "AUTH_INITIAL_STATE" which will store all the data, and authReducer itself, which depends on the action type will modify stored data; import AUTH_ACTION_TYPES from './auth.types'; export const AUTH_INITIAL_STATE = { user: null, }; export const authReducer = (state = AUTH_INITIAL_STATE, action = {}) => { const { type, payload } = action; switch (type) { case AUTH_ACTION_TYPES.SET_USER: return { ...state, user: payload }; default: return state; } }; next action file that will use our "createAction" helper and create a function that will call the reducer; import AUTH_ACTION_TYPES from './auth.types'; import { createAction } from '../../utils/reducer.utils'; export const aSetUser = (user) => createAction(AUTH_ACTION_TYPES.SET_USER, user); finally, the selector, will simply give a "get" access to the storage value. In other words it will return the value of the stored data. export const sUser = (state) => state.auth.user; Great. We configured our first storage data with its functionality (to get and to set data). 3. Use the "Redux" Store in React App Open "main.jsx" file and import "Provider" and "store", then wrap our App the "Provider". import React from 'react'; import ReactDOM from 'react-dom/client'; import { Provider }

Apr 23, 2025 - 16:50

Redux Integration: Enhancing Your Node.js and React CMS

We've reached the next crucial milestone in building our CMS: configuring Redux, which we installed in the previous step. Before we dive into the configuration process, it's important to address a fundamental question: Why do we need additional storage on the front-end side?

In modern web applications, especially complex ones like content management systems, managing state becomes increasingly challenging as the application grows. While React provides a local component state, it can become cumbersome to pass data between deeply nested components or share states across unrelated parts of the application. This is where Redux comes in.

Redux offers a centralized store for all the states in your application. This centralization brings several benefits:

Single Source of Truth: All your application state is stored in one place, making it easier to understand and manage.
Predictable State Updates: State changes become more predictable as they follow a strict unidirectional data flow.
Improved Debugging: With tools like Redux DevTools, you can easily track state changes over time.
Performance Optimization: By avoiding unnecessary re-renders and simplifying data flow, Redux can help improve your application's performance.
Persistence and Hydration: Redux makes it easier to persist and rehydrate the state on page reload, which is crucial for a robust CMS.

Now that we understand the 'why,' let's proceed with configuring Redux in our Node.js and React CMS. We'll walk through the setup process step-by-step, ensuring our application is prepared to handle complex state management efficiently.

1. Add "createAction" Helper Util

The "createAction" utility function simplifies the process of creating action objects in Redux, promoting consistency and reducing boilerplate code throughout your application. Abstracting the action creation process ensures that all actions follow the same structure (with type and payload properties), which makes debugging easier and helps maintain a predictable state shape. This utility function also makes it easier to refactor action creators in the future, as any changes to the action structure can be implemented in one place rather than scattered throughout the codebase.

So let's add a new "utils" folder inside the "admin" root folder. Create a new "reducer.utils.js" file, from which we will export the "createAction" helper:

export const createAction = (type, payload) => ({ type, payload });

And that's it, now we can move to the store itself.

2. Structuring "Redux" Store

create a new "store" folder inside the "admin" root;
add a new "store.js" file, which will store all configures and accumulate separate stores;
import "configureStore" function that will create a main store, with reducer as object parameter;
just for beginning, we will create our first "auth" store;

import { configureStore } from '@reduxjs/toolkit';
import { authReducer } from './auth/auth.reducer';

export const store = configureStore({
    reducer: {
        auth: authReducer
    }
})

create a new "auth" folder inside the "store" folder;
add new "auth.reducer.js", "auth.action.js", "auth.selector.js", "auth.types.js" files. This will be our typical store structure. Our "auth" folder will contain data for authentication, "posts" for example will be created for our posts, etc...
inside the types file we will create the first "SET_USER" action type that will define an action that will update the user state inside the reducer;

const AUTH_ACTION_TYPES = {
    SET_USER: 'auth/SET_USER',
};

export default AUTH_ACTION_TYPES;

reducer file will contain "AUTH_INITIAL_STATE" which will store all the data, and authReducer itself, which depends on the action type will modify stored data;

import AUTH_ACTION_TYPES from './auth.types';

export const AUTH_INITIAL_STATE = {
    user: null,
};

export const authReducer = (state = AUTH_INITIAL_STATE, action = {}) => {
    const { type, payload } = action;
    switch (type) {
        case AUTH_ACTION_TYPES.SET_USER:
            return { ...state, user: payload };
        default:
            return state;
    }
};

next action file that will use our "createAction" helper and create a function that will call the reducer;

import AUTH_ACTION_TYPES from './auth.types';
import { createAction } from '../../utils/reducer.utils';

export const aSetUser = (user) =>
  createAction(AUTH_ACTION_TYPES.SET_USER, user);

finally, the selector, will simply give a "get" access to the storage value. In other words it will return the value of the stored data.

export const sUser = (state) => state.auth.user;

Great. We configured our first storage data with its functionality (to get and to set data).

3. Use the "Redux" Store in React App

Open "main.jsx" file and import "Provider" and "store", then wrap our App the "Provider".

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store/store';
import App from './App.jsx';
import './assets/styles/styles.scss';

ReactDOM.createRoot(document.getElementById('root')).render()

Let's open our "Login.jsx" component from our previous article. Import "useDispatch" (provides a way to dispatch actions to the Redux store from within functional components, allowing you to trigger state updates without needing to manually connect your component to the store) from "react-redux". Then we will modify our "Login" function and dispatch "aSetUser" action to update "user" inside reducer.

import React from 'react';
import { useState } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { login } from '../../http/services/auth.services';
import { useDispatch } from 'react-redux';
import { aSetUser } from '../../store/auth/auth.action';
import Loader from '../../components/ui/loader/Loader.component';
import './login.styles.scss';

const Login = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const handleLogin = async () => {
  try {
    const result = await login({ email, password });
    if (result.status === 'success') {
      localStorage.setItem('token', result.token);
      dispatch(aSetUser(result.userResponse);
      navigate('/');
    } else {
      alert(result.message);
    }
  } catch (error) {
    console.error('Login error:', error);
    if (error.response && error.response.data?.status === "error") {
      alert(result.message);
    } else {
      alert('An error occurred. Please try again later.');
    }
  }
}
  return (...);
}

export default Login;

Yes, we finished with the Redux implementation, we will definitely need and use this store in the future so we will have more practice.

In essence, integrating Redux into our CMS project is an investment in the future of our application. While it may introduce some initial complexity, the long-term benefits in state management, code organization, and application predictability are well worth the effort. As you continue to develop your CMS, you'll find that this Redux foundation becomes an invaluable asset, supporting your project's growth and maintaining code quality along the way. Happy coding, and may your Redux-powered CMS flourish!

If you need a source code for this tutorial you can get it here.

Found this post useful? ☕ A coffee-sized contribution goes a long way in keeping me inspired! Thank you)

Next step: "Enhancing User Experience: Implementing Notifications, Modals and Loaders in a React-based CMS"