What is a store in Redux ?

In Redux, the store is the central where all the state for the application is stored. This ensures the state is predictable and persistent for the entire application. is the central component for handling the state for the Redux application.

Basics of Redux Store

The Redux store is the heart of state management in a Redux application. It acts as a centralized hub where all the state data is stored and managed. This ensures consistency and predictability in handling application state.

Responsibilities of the Redux Store:

• Manages Application State: It stores and organizes all the data that different components need.
• Provides Access to State: Components can retrieve data from the store using getState().
• Updates State with Actions: Changes in state happen only through dispatch(action), ensuring that updates follow a predictable flow.
• Works with Reducers: Reducers define how state updates occur based on actions dispatched to the store.

Setting Up a Redux Store

Follow these steps to set up a Redux store in your application:

Step 1: Install Redux and React-Redux

Run the following command

npm install redux react-redux

Step 2: Create the Store

Import createStore from Redux and define a reducer:

import { createStore } from "redux";


const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

const store = createStore(counterReducer);

export default store;

Actions and Reducers

What Are Actions?

Actions are plain JavaScript objects that describe what needs to change in the application's state. They are the only way to send data to the Redux store. Each action must have a type property that defines what kind of change should happen. Optionally, it can include additional data (payload) needed for the update.

const incrementAction = { type: 'INCREMENT' };
const decrementAction = { type: 'DECREMENT' };
const addUserAction = { type: 'ADD_USER', payload: { name: 'Jiya', age: 30 } };

What Are Reducers?

Reducers determine how the state should change based on the received action. A reducer is a pure function that takes the current state and an action as input and returns the new state.

• Must be pure functions (no side effects like API calls or modifying inputs).
• Should return a new state instead of modifying the existing state.
• Must always return a valid state.

const initialState = { count: 0 };

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

How Actions and Reducers Connect to the Store

• Store Dispatches an Action: Components or middleware dispatch an action to signal a change.

dispatch({ type: 'INCREMENT' });

• Action is Passed to the Reducer: The store automatically sends the dispatched action to the corresponding reducer.
• Reducer Updates the State: The reducer takes the current state and the action, processes it, and returns a new state.
• Store Updates Components: The Redux store notifies all subscribed components about the state update. Components re-render with the latest state.

import { createStore } from "redux";

const initialState = { count: 0 };

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

const store = createStore(counterReducer);

store.dispatch({ type: "INCREMENT" });
console.log(store.getState()); 

Enhancing Redux Store with Middleware

Middleware enhances the Redux store by handling asynchronous actions, logging, and more. Popular middleware includes:

• Redux Thunk: For managing async actions.
• Redux Logger: For logging dispatched actions and state changes.

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

Implementing Redux Store in a React 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";

ReactDOM.render(
    <React.StrictMode>
        <Provider store={appStore}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById("root")
);

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;

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

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

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

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

export { INCREMENT, incrementCount, decrementCount, DECREMENT };

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

import { createStore } from "redux";
import { currencyReducer } from "./reducers/currencyReducer";

const appStore = createStore(currencyReducer);

export default appStore;

Output: 

In this code

• Store Creation: appStore is initialized using createStore(currencyReducer), which manages the counter state.
• Provider Component: The Provider from react-redux wraps App, making the Redux store accessible throughout the application.
• Connecting to Redux: The Counter component is connected via connect(), allowing access to count and dispatching actions.
• Actions and Reducer: Clicking buttons dispatches incrementCount and decrementCount, which currencyReducer listens to and updates the state.
• State Update: The currencyReducer modifies the count state based on the dispatched action (INCREMENT or DECREMENT).

Note :

• Redux Store: Offers powerful debugging tools like Redux DevTools for state tracking.
• React Store: Lacks dedicated debugging tools; requires manual state logging.

Conclusion

Redux provides a powerful and structured way to manage application state, ensuring consistency and predictability. It centralizes data, making it easier to manage complex state across components. By leveraging actions, reducers, and middleware, Redux enhances performance, simplifies debugging, and offers scalability for large applications. While Redux is ideal for complex applications, simpler solutions like React Context may suffice for small-scale projects.

kvvik2020

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• Geeks Premier League
• Geeks-Premier-League-2022
• Web technologies
• React-Redux
• React-Questions

+2 More