What is a store in Redux ?

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

Prerequisites

• React State Management
• Basics of Redux
• Understanding Flux Architecture

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.

Stesps to create React Application & Install Redux

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

Project Structure:

folder structure

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

Write down the following code in respective files.

Javascript

// 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")
);

Javascript

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

Javascript

// 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);

Javascript

//actions/counterActions.jsx

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

const incrementCount = () => ({
    type: INCREMENT,
});

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

export { INCREMENT, incrementCount, decrementCount, DECREMENT };

Javascript

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

Javascript

//redux/store.js

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