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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
| 在 React 中使用 Redux 主要分为以下几个步骤，包含了设置 Redux 的 store，
创建 actions 和 reducers，以及将这些与 React 组件连接在一起。
1-过程
1.1-步骤 1：安装 Redux 及相关库(首先，安装redux和react-redux（用于连接React和Redux）)
npm install redux react-redux
1.2-步骤 2：创建 Redux 的 Store、Actions 和 Reducers
-1.2.1-创建 Action：用于描述事件或用户操作
// actions.js
export const increment = () => ({
type: 'INCREMENT',
});
export const decrement = () => ({
type: 'DECREMENT',
});
-1.2.2-创建 Reducer：处理状态更新的逻辑。
// reducer.js
const initialState = {
count: 0,
};
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'DECREMENT':
return { ...state, count: state.count - 1 };
default:
return state;
}
};
export default counterReducer;
-1.2.3 创建 Store：使用 createStore 创建 Redux store，传入 reducer
// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';
const store = createStore(counterReducer);
export default store;
1.3 步骤 3：使用 Provider 包裹应用
react-redux 提供了Provider组件，用来将Redux store提供给整个应用。通常在应用的根组件中使用它。
// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter'; // 一个需要访问 Redux 状态的组件
const App = () => {
return (
<Provider store={store}>
<Counter />
</Provider>
);
};
export default App;
1.4步骤 4：连接组件与 Redux（使用 connect）
react-redux 提供了 connect 高阶组件来将 Redux 状态和 dispatch 方法传递给 React 组件。
// Counter.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';
const Counter = ({ count, increment, decrement }) => {
return (
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
// 映射 Redux 状态到组件的 props
const mapStateToProps = (state) => ({
count: state.count,
});
// 映射 Redux 动作到组件的 props
const mapDispatchToProps = {
increment,
decrement,
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
1.5 步骤 5：使用 useSelector 和 useDispatch（React-Redux Hook）
如果使用 React 的 Hook，可以使用 useSelector 和 useDispatch 来访问 Redux 状态和派发动作。
// Counter.js (使用 hooks)
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';
const Counter = () => {
const count = useSelector((state) => state.count);
const dispatch = useDispatch();
return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
};
export default Counter;
2.总结
1.创建 Actions：定义应用中的各种行为（如增减、登录等）。
2.创建 Reducers：根据 actions 更新应用的状态。
3.创建 Store：用来存储和管理状态。
4.使用 Provider：将 Redux store 提供给整个应用。
5.连接组件与 Redux：
-使用connect或useSelector和useDispatch将Redux状态和dispatch方法传递给Reac 组件。
这样，你就能在 React 中使用 Redux 来管理应用状态了
|