快速添加 Redux 到 APP

整个 redux 采用功能进行划分数据数据流, 所以创建目录一般在 src/features/功能名称 下, 然后将 reducer 导出到 store 中进行管理.

安装依赖

在新项目中安装依赖

npx create-react-app my-app --template redux

已有项目安装依赖

yarn add react-redux @reduxjs/toolkit
yarn add -D @types/react-redux

修改主页内容支持 redux

修改 index.html 增加内容

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

<Provider store={store}>
  <App />
</Provider>,

构建数据管理模块 Slice

src/features/light/lightSlice.js

import { createSlice } from "@reduxjs/toolkit";

export const lightSlice = createSlice({
  // 名称
  name: "light",

  // 初始化属性数据
  initialState: { red: 1, yellow: 0, green: 0 },

  // 定义属性数据操作方法
  reducers: {
    setState: (state, action) => {
      const { red, yellow, green } = action.payload;

      state.red = red;
      state.yellow = yellow;
      state.green = green;
    },
  },
});

export const { setState } = lightSlice.actions;

// 注意 reducer 是单数
export default lightSlice.reducer;

与数据管理器交互

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { setState } from "./lightSlice";

function randLight {
  const rand = Math.floor(Math.rand() * 3);
  let red, yellow, green = 0, 0, 0;

  if (rand == 0) { red = 1; }
  if (rand == 1) { yellow = 1; }
  if (rand == 2) { green = 1; }

  return {red, yellow, green};
}

export function light() {
  const { red, green, yellow } = useSelector((state) => state.light);
  const dispatch = useDispatch();

  return (
    <div>
      <div>
        <span>green: {green} red {red} yellow {yellow}</span>
        <button aria-label="change light color" onClick={() => dispatch(setState(randLight()))}>
          Change Color
        </button>
      </div>
    </div>
  );
}

构建数据中心 store

src/store.js

假设功能名称为 light

import { configureStore } from "@reduxjs/toolkit";
import lightReducer from "./features/light/lightSlice";

export default configureStore({
  reducer: {
    light: lightReducer,
  },
});

参考资料

• Learn With Jason
• Mark Erikson
• Redux Toolkit