Redux is the state management library that is used in JavaScript apps. It is used to manage the state of data and access them at different components level in the app. In redux, there are three parts as follows:
- Actions
- Reducer
- Store
Store: It is an object which provides the state of the application. This object is accessible with help of the provider in the files of the project. The only way to change the state inside it is to dispatch an action on it.
There are three important parts of the store:
- createStore(): To create a store object in redux.
- dispatch(action): To change the state of store data by using the actions.
- getState(): For getting the current state of the store in redux.
Let’s create an application to demonstrate how a store is defined.
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
Step 3: Install the following modules. 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 store.
In the src folder, make two new folder components and redux. In components add a jsx file named Counter.jsx. In the redux folder, create a folder name actions and counterActions.jsx file to it. Then in redux folder create a folder name reducer and add a file named currencyReducer.jsx. And then in the redux folder add store.js file.
Project Structure: It will look like this.
folder structure
Example: Write down the following code in respective files.
index.js
Javascript
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")); |
In the above index,js file with help of the provider we are accessing the store in our whole app component.
App.js
Javascript
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; |
In the components folder these files are as follows:
Counter.jsx
Javascript
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); |
In redux folder these files as follows:
actions/counterActions.jsx
Javascript
const INCREMENT = "INCREMENT";const DECREMENT = "DECREMENT";const incrementCount = () => ({ type: INCREMENT,});const decrementCount = () => { return { type: DECREMENT, };};export { INCREMENT, incrementCount, decrementCount, DECREMENT }; |
reducer/currencyReducer.jsx
Javascript
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 }; |
redux/store.js
Javascript
import { createStore } from "redux";import { currencyReducer } from "./reducers/currencyReducer";const appStore = createStore(currencyReducer);export default appStore; |
Step to run the application: Run the application using the following command:
npm start
Output:
Store in Redux
