React State Management (3) : Redux Toolkit
Tags: react, redux, beginners
Published: 2022-03-07 07:51:04

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 Toolkit](https://redux-toolkit.js.org/).

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*CNNQhgrJVItZdehwrbSmNg.png)

## 1) Set up slices, and store

First of all, you need to install react-redux and @reduxjs/toolkit.

    npm install @reduxjs/toolkit react-redux

### text-slice.js
```javascript
    import { createSlice } from "@reduxjs/toolkit";

    const textSlice = createSlice({
      name: "text",
      initialState: {
        text: null,
      },

    reducers: {
        submit(state, action) {
          state.text = action.payload;
        },
      },
    });

    export const textActions = textSlice.actions;
    export default textSlice;
```
### index.js
```javascript
    import { configureStore } from "@reduxjs/toolki(http://twitter.com/reduxjs/toolkit)";
    import textSlice from "./text-slice";
    const store = configureStore({
      reducer: { text: textSlice.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 "./store/intex";

    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 { textActions } from "../store/text-slice";
    import ComponentB from "./ComponentB";
    const ComponentA = () => {
      const [value, setValue] = useState("");
      const dispatch = useDispatch();
      const changeHandler = (e) => {
        setValue(e.target.value);
        dispatch(textActions.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.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.text);
      return (
        <>
          <h1>Lowercase</h1>
          <h2>{text && text.toLowerCase()}</h2>
        </>
      );
    };

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

Thank you for reading :)

The original article is [here](https://medium.com/@lada496/react-state-management-3-redux-toolkit-9526ff9b23a1)