Skip to content
Related Articles
Open in App
Not now

Related Articles

What is the purpose of constants in Redux ?

Improve Article
Save Article
  • Last Updated : 22 Mar, 2022
Improve Article
Save Article

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 at one file or one place.

The reasons to consider the constants:

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

Example of the contents:


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

Creating React Application

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

Now from the root directory of your project in the terminal, run the following command

npm install redux
npm install react-redux

Example: Let’s make a simple counter application with help of redux to understand the purpose of constants.

In the src folder, create two new folder components and redux. In components folder add a jsx file named Counter.jsx. In the redux folder, create a folder name actions and add a file counterActions.jsx file to it. Then in the redux folder create a folder name reducer and add a file currencyReducer.jsx. In the redux folder add store.js file.

Project Structure: The project structure will look like below:

folder structure

Below are the files that need to be modified as given in our application:


import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import appStore from "./redux/store";
        <Provider store={appStore}>
            <App />


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


import React from "react";
import { connect } from "react-redux";
import {
} from "../redux/actions/counterActions";
class Counter extends React.Component {
    render() {
        const { count, incrementCount, decrementCount } = this.props;
        return (
                <button onClick={() => decrementCount()}>-</button>
                <span> {count} </span>
                <button onClick={() => incrementCount()}>+</button>
const mapStateToProps = (state) => ({
    count: state,
const mapDispatchToProps = (dispatch) => ({
    decrementCount: () => dispatch(decrementCount()),
    incrementCount: () => dispatch(incrementCount()),
export default connect(mapStateToProps, mapDispatchToProps)(Counter);


const incrementCount = () => ({
    type: INCREMENT,
const decrementCount = () => {
    return {
        type: DECREMENT,
export { INCREMENT, incrementCount, decrementCount, DECREMENT };

Here we have defined the two constants:


These two constants we are using in the actions as their types.


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


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

Step to run the application: After setting up all the files, from the terminal run the following command to start the app to run

npm start



My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!