|
|
@@ -64,4 +64,84 @@ dispatch({type: '', payload: 10})
|
|
|
- reducer函数都可以接收两个参数：state整个slice下的状态对象 以及 action对象
|
|
|
- slice中reducer函数都可以直接通过state修改状态，无需在返回新状态
|
|
|
|
|
|
+ ```js
|
|
|
+ import { createSlice } from '@reduxjs/toolkit';
|
|
|
+
|
|
|
+ export const counterSlice = createSlice({
|
|
|
+ name: 'counter',
|
|
|
+ initialState: {
|
|
|
+ value: 0,
|
|
|
+ },
|
|
|
+ reducers: {
|
|
|
+ addOne(state) {
|
|
|
+ state.value++;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ //! counterSlice.actions对象包含所有与reducers函数同步的action对象creator函数
|
|
|
+ export const { addOne } = counterSlice.actions;
|
|
|
+
|
|
|
+ // counterSlice.reducer 就是 最终counter状态的修改函数
|
|
|
+ export default counterSlice.reducer;
|
|
|
+ ```
|
|
|
+
|
|
|
+ ## 4. 异步处理
|
|
|
+
|
|
|
+ > Redux原生不支持异步处理机制，需要我们通过一些中间件去完成。
|
|
|
+
|
|
|
+ 好在，Redux Toolkit中内置了Thunk中间件可以完成异步任务处理。因此 在UI组件中调用dispatch时，不仅可以传入一个Action对象，还可以传入一个`thunk`函数，由其处理异步任务有结果后，在`dispatch`一个action去修改状态。
|
|
|
+
|
|
|
+ 那么，什么是Thunk函数？
|
|
|
+
|
|
|
+ - 可以是普通函数，也可以是async 函数
|
|
|
+ - 函数会接收两个参数：dispatch 以及 getState函数
|
|
|
+ - dispatch 顾名思义，用来异步处理后，执行状态修改的
|
|
|
+ - getState 用来获取完整的store中的状态对象，以备之需
|
|
|
+
|
|
|
+ ```js
|
|
|
+ //! 实现异步处理
|
|
|
+ //* 通过定义一个thunk函数 去完成异步任务即可
|
|
|
+ export function asyncAddOne(dispatch, getState) {
|
|
|
+ //* getState调用后返回整个store中的状态对象，而不是某个slice下的状态
|
|
|
+ let state = getState();
|
|
|
+ console.log(state);
|
|
|
+
|
|
|
+ // 异步任务
|
|
|
+ setTimeout(() => {
|
|
|
+ dispatch(addOne());
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ ```
|
|
|
+
|
|
|
+ Counter组件中，
|
|
|
+
|
|
|
+ ```jsx
|
|
|
+ import Styles from './counter.module.css';
|
|
|
+ import { useSelector, useDispatch } from 'react-redux';
|
|
|
+ // 引入Thunk函数
|
|
|
+ import { asyncAddOne } from './counterSlice';
|
|
|
+
|
|
|
+ function Counter() {
|
|
|
+ const dispatch = useDispatch();
|
|
|
+ let count = useSelector(({ counter }) => counter.value);
|
|
|
+ return (
|
|
|
+ <div className={Styles.counter}>
|
|
|
+ <p>计数：{count}</p>
|
|
|
+ <p>
|
|
|
+ <button
|
|
|
+ onClick={() => {
|
|
|
+ //! dispatch时传入thunk函数
|
|
|
+ dispatch(asyncAddOne);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ aysnc add
|
|
|
+ </button>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ export default Counter;
|
|
|
+ ```
|
|
|
+
|
|
|
|
daxia