Skip to content
Related Articles

Related Articles

What is the purpose of constants in Redux ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 22 Mar, 2022

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:

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

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:

src/index.js




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";
  
ReactDOM.render(
    <React.StrictMode>
        <Provider store={appStore}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById("root")
);

App.js




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

components/Counter.jsx




import React from "react";
import { connect } from "react-redux";
import {
    incrementCount,
    decrementCount,
} from "../redux/actions/counterActions";
  
class Counter extends React.Component {
    render() {
        const { count, incrementCount, decrementCount } = this.props;
        return (
            <div>
                <button onClick={() => decrementCount()}>-</button>
                <span> {count} </span>
                <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);

actions/counterActions.jsx




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

Here we have defined the two constants:

  • INCREMENT
  • DECREMENT

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

reducer/currencyReducer.jsx




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 };

store.js




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

Output: 

Output


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!