Redux Explained Simply

Posted Dec 24, 2022

Redux is a powerful state management tool that is commonly used with React to provide a predictable, centralized store for application data. Configuring Redux with a React project allows for easier management of application state and improved data flow between components.

One of the main benefits of using React-Redux is its ability to easily manage complex and nested state. This is because Redux uses a single, immutable store for all state, rather than each component having its own state. This makes it easier to track changes and debug issues, as well as avoiding potential conflicts between components.

React-Redux also includes a set of hooks that make it easier to integrate Redux with React components. These hooks allow for easy access to the Redux store and dispatch functions, as well as providing performance optimizations such as avoiding unnecessary re-renders.

To begin, you will need to install the Redux and React Redux packages using npm. This can be done by running the following command:

npm install redux react-redux

Next, create a store.js file in your project directory to contain the Redux store. Inside this file, we will define the initial state of our application and configure the Redux store.

import { createStore } from "redux";

const initialState = {
  count: 0,
};

const store = createStore(reducer, initialState);

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

export default store;

Here, we have defined an initial state with a count property set to 0. We have also defined a reducer function that handles actions dispatched to the store and updates the state accordingly. In this case, we have only defined the INCREMENT action, which will increment the count property by 1.

Next, we need to integrate the Redux store into our React application. In the root component of our application (usually App.js), we can import the Provider component from react-redux and wrap our component tree with it. This will provide the Redux store to all child components.

import React from "react";
import { Provider } from "react-redux";
import store from "./store";

function App() {
  return (
    <Provider store={store}>
      <div>{/* component tree here */}</div>
    </Provider>
  );
}

export default App;

Here is an example of a simple React component using the useSelector and useDispatch hooks from React-Redux:

import React from "react";
import { useSelector, useDispatch } from "react-redux";

function Counter() {
  const count = useSelector((state) => state.count); // access the count value from the Redux store
  const dispatch = useDispatch(); // access the dispatch function

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>
        Increment
      </button> // dispatch an action to increment the count
      <button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
      // dispatch an action to decrement the count
    </div>
  );
}

In this example, the useSelector hook is used to access the count value from the Redux store, and the useDispatch hook is used to access the dispatch function. This allows the component to both display the current count value and dispatch actions to update the count.