React State Management (2) : Redux
Tags: react, redux, beginners
Published: 2022-03-07 06:45:05

This is a series of memos referring to the ways of React state management: context API, Redux, Redux toolkit and Recoil. The topic in this article is Redux.

The chart below is the whole image of this practice application. ComponentA accepts user input text and passes it over to ComponentB as a prop. At the same time, dispatch the action to save the data in the store so that ComponentC and componentD can use it.

![](https://cdn-images-1.medium.com/max/3416/1*bALRKQHNfC8D8ml_i7hgVg.png)
[**Redux Fundamentals, Part 1: Redux Overview | Redux**](https://redux.js.org/tutorials/fundamentals/part-1-overview#data-flow)

This is the image of this application.

![](https://cdn-images-1.medium.com/max/2000/1*zUqew-PzV8gc-MPkiN-nHw.gif)

This is the structure of files in src folder.

![](https://cdn-images-1.medium.com/max/2000/1*YiHfo7TqL8D_urDLp2Q_sw.png)

## 1) Set up types, actions, reducers, and store
First of all, you need to install redux and react-redux.

    npm install redux react-redux

### types
```javascript
    export const SUBMIT = "SUBMIT";
```
### actions
```javascript
    import { SUBMIT } from "./types";

    export const submit = (text) => ({
      type: SUBMIT,
      payload: text,
    });
```
### reducer
```javascript
    import { SUBMIT } from "./types";
    const INIT_STATE = {
      text: null,
    };

    const reducer = (state = INIT_STATE, action) => {
      if (action.type === SUBMIT) {
        return {
          text: action.payload,
        };
      } else {
        return state; //provide the default action to return state which redux uses when initialization
      }
    };

    export default reducer;
```
### store
```javascript
    import { createStore } from "redux";
    import reducer from "./reducer";

    const store = createStore(reducer);

    export default store;
```
## 2) Provider

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 store from "./redux/store";

    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById("root")
    );
```
## 3) useDispatch, useSelector

### ComponentA
```javascript
    import { useState } from "react";
    import { useDispatch } from "react-redux";
    import { submit } from "../redux/actions";
    import ComponentB from "./ComponentB";
    const ComponentA = () => {
      const [value, setValue] = useState("");
      const dispatch = useDispatch();
      const changeHandler = (e) => {
        setValue(e.target.value);
        dispatch(submit(e.target.value));
      };
      return (
        <>
          <input type="text" value={value} onChange={changeHandler} />
          <ComponentB text={value} />
        </>
      );
    };

    export default ComponentA;
```
### ComponentC
```javascript
    import { useSelector } from "react-redux";
    const ComponentC = () => {
      const text = useSelector((state) => state.text);
      return (
        <>
          <h1>Uppercase</h1>
          <h2>{text && text.toUpperCase()}</h2>
        </>
      );
    };
    export default ComponentC;
```
ComponentD
```javascript
    import { useSelector } from "react-redux";
    const ComponentD = () => {
      const text = useSelector((state) => state.text);
      return (
        <>
          <h1>Lowercase</h1>
          <h2>{text && text.toLowerCase()}</h2>
        </>
      );
    };

    export default ComponentD;
```
The whole code is available [here](https://codesandbox.io/s/musing-fermi-t0yffm?file=/src/index.js)

Please read them as well. These are more simple ways than normal Redux to get the same result :)
[React State Management (1) : context API](https://dev.to/lada496/react-state-management-1-context-api-3klc)
[React State Management (3) : Redux Toolkit](https://dev.to/lada496/react-state-management-3-redux-toolkit-5f7c)

Thank you for reading :)

The original article is [here](https://medium.com/@lada496/react-state-management-2-redux-5770c184247f)