快速添加 Redux 到 APP

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

安装依赖

在新项目中安装依赖

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

已有项目安装依赖

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

修改主页内容支持 redux

修改 index.html 增加内容

1
2
import { Provider } from "react-redux";
import store from "./store";
1
2
3
<Provider store={store}>
<App />
</Provider>,

构建数据管理模块 Slice

src/features/light/lightSlice.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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;

与数据管理器交互

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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

1
2
3
4
5
6
7
8
import { configureStore } from "@reduxjs/toolkit";
import lightReducer from "./features/light/lightSlice";

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

参考资料

Donate - Support to make this site better.
捐助 - 支持我让我做得更好.