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
