DEV Community

Cover image for React State Management (3) : Redux Toolkit
Yuko
Yuko

Posted on • Updated on

React State Management (3) : Redux Toolkit

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.

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.


Redux Fundamentals, Part 1: Redux Overview | Redux

This is the image of this application.

1) Set up slices, and store

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

npm install @reduxjs/toolkit react-redux
Enter fullscreen mode Exit fullscreen mode

text-slice.js

    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;
Enter fullscreen mode Exit fullscreen mode

index.js

    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;
Enter fullscreen mode Exit fullscreen mode

2) Provider

index.js

    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")
    );
Enter fullscreen mode Exit fullscreen mode

3) useDispatch, useSelector

ComponentA

    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;
Enter fullscreen mode Exit fullscreen mode

ComponentC

    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;
Enter fullscreen mode Exit fullscreen mode

ComponentD

    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;
Enter fullscreen mode Exit fullscreen mode

The whole code is available here

Thank you for reading :)

The original article is here

Top comments (0)