What is the purpose of constants in Redux ?

Last Updated : 30 Nov, 2023

In Redux, we have a lot of actions and reducers defined while making an application and managing its state from the redux. Then, constants come into the picture, it provides a way to define the type of actions and reducers in one file or one place.

The reasons to consider the constants:

The type of actions and reducers are being used in two different files. Constants help to import them and use them from a single page.
The readability of code increases because all constants are listed in one file and give info in one read.
It helps to reduce small typing issues and bugs while writing.

Example of the contents:

const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";

Let’s create an application with react and redux to demonstrate the purpose of the constants :

Steps to Create the React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app example

Step 2: After creating your project folder i.e. example, move to it using the following command:

cd example

Step 3: Now Installing the modules:

npm install redux
npm install react-redux

Project Structure:

folder structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.3",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Let’s make a simple counter application with help of redux to understand the purpose of constants. Below are the files that need to be modified as given in our application:

Javascript

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import appStore from "./redux/store";
 
ReactDOM.render(
    <React.StrictMode>
        <Provider store={appStore}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById("root")
);

Javascript

import "./App.css";
import Counter from "./Component/Counter";
 
function App() {
    return (
        <div
            style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                height: "100vh",
            }}
        >
            <Counter />
        </div>
    );
}
 
export default App;

Javascript

//Counter.js
 
import React from "react";
import { connect } from "react-redux";
import {
    incrementCount,
    decrementCount,
} from "../actions/CounterActions";
 
class Counter extends React.Component {
    render() {
        const { count, incrementCount, decrementCount } = this.props;
        return (
            <div style={
                {
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center'
                }
            }>
                <button onClick={() => decrementCount()}>-</button>
                <div style={
                    {
                        width: "7rem",
                        textAlign: 'center'
                    }}>
                    <span> {count} </span>
                </div>
                <button onClick={() => incrementCount()}>+</button>
            </div>
        );
    }
}
 
const mapStateToProps = (state) => ({
    count: state,
});
 
const mapDispatchToProps = (dispatch) => ({
    decrementCount: () => dispatch(decrementCount()),
    incrementCount: () => dispatch(incrementCount()),
});
 
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Javascript

//actions/CounterActions.js
 
const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";
 
const incrementCount = () => ({
    type: INCREMENT,
});
 
const decrementCount = () => {
    return {
        type: DECREMENT,
    };
};
 
export { INCREMENT, incrementCount, decrementCount, DECREMENT };

Javascript

//store/congigureStore.js
 
import { createStore } from "redux";
import { currencyReducer } from "../reducers/currencyReducer";
 
const appStore = createStore(currencyReducer);
 
export default appStore;

Javascript

//reducers/currencyReducer.js
 
import { INCREMENT, DECREMENT } from "../actions/CounterActions";
 
const currencyReducer = (state = 0, action) => {
    switch (action.type) {
        case INCREMENT:
            return state + 1;
        case DECREMENT:
            return state - 1;
        default:
            return state;
    }
};
 
export { currencyReducer };

CSS

/* App.css */
 
body {
    background-color: antiquewhite;
}
 
button {
    width: 5em;
    height: 2em;
    background-color: rgb(27, 24, 24);
    font-weight: 600;
    font-size: 1rem;
    font-family: sans-serif;
    color: white;
    border-radius: 6px;
    border: none;
}
 
span {
    font-size: 4rem;
    padding: 8px;
}
 
button:hover {
    background-color: rgb(73, 74, 73);
}