发布：2023/12/18 14:04:33作者：管理员 来源：本站 浏览次数：257
一、什么是redux-thunk
redux-thunk 是一个用于处理 Redux 异步 action 的中间件。它允许我们在 Redux 中编写异步的 action 创建函数（action creator），这些 action 创建函数可以返回一个函数而不是一个 action 对象。这个返回的函数可以接收 dispatch 和 getState 两个参数，并在函数体内进行异步操作后，再使用 dispatch 方法触发一个或多个普通的同步 action。
二、项目中使用
1、安装
npm install redux-thunk
2、在createStore里使用applyMiddleware传入
// 引入thunk
import thunk from 'redux-thunk'
// 使用中间件
const store = createStore(rootReducer, applyMiddleware(thunk));
三、编写一个延迟三秒在进行赋值的action
1、创建一个actions模块
import { bindActionCreators } from "redux";
import { useDispatch } from "react-redux";
import { useMemo } from "react";
const dely = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(10);
}, 1000);
});
};
export const updateByAmount = (num) => {
/**
* 使用了thunk之后，可以直接返回一个方法
* 该方法接收两个参数
* 第一个是 dispatch 用来触发reducer
* 第二个是 getState 是一个方法，用来获取state
* 注意：这里的state是获取的所有模块的state
*/
return async (dispatch, getState) => {
console.log(getState())
// 延迟1秒
await dely();
// 调用对应的reducer
dispatch({
type: "UPDATE_BY_AMOUNT",
num,
});
};
};
export function useActions(actions) {
const dispatch = useDispatch();
return useMemo(() => {
return bindActionCreators(actions, dispatch);
}, [actions, dispatch]);
}
2、页面中使用
import React from "react";
import { useSelector } from "react-redux";
import { updateByAmount } from "./actions";
import { useActions } from "./useActions";
function Counter() {
const state = useSelector((state) => state.user);
const actions = useActions({
updateByAmount: (amount) => updateByAmount(amount),
});
const add = async () => {
actions.updateByAmount(10);
};
return (
<div>
<p>
延迟1秒展示: {state.name} -- {state.num}
</p>
<button onClick={() => add()}>+</button>
</div>
);
}
export default Counter;
四、为什么需要使用redux-thunk
当我们在 Redux 中处理异步操作时，如果不使用中间件（比如 redux-thunk），我们需要手动编写代码来管理异步操作的状态，代码会变得复杂，难以维护。而使用 redux-thunk 可以让我们更加轻松地处理异步操作，只需要在 action 创建函数中返回一个函数，在这个函数中进行异步操作即可。redux-thunk 可以让我们在 Redux 中处理异步操作，使代码变得简单、易于维护。
五、redux-thunk的工作原理
下面是一个简化版的 redux-thunk 源码实现，用于说明 redux-thunk 的工作原理
function thunkMiddleware({ dispatch, getState }) {
return next => action => {
// 如果 action 是一个函数，那么调用它，并传递 dispatch 和 getState 函数作为参数
if (typeof action === 'function') {
return action(dispatch, getState);
}
// 否则，调用下一个中间件
return next(action);
};
}
thunkMiddleware 是一个高阶函数，它接收 { dispatch, getState } 作为参数，返回一个新函数。这个新函数是一个中间件，接收 next 和 action 两个参数，返回一个结果。
当一个 action 被派发时，这个 action 会先经过 thunkMiddleware 中间件，如果这个 action 是一个函数，那么 thunkMiddleware 就会调用这个函数，并传递 dispatch 和 getState 函数作为参数。这个函数可以进行异步操作，然后在异步操作完成后再调用 dispatch 函数派发真正的 action 对象。
如果这个 action 不是一个函数，那么 thunkMiddleware 就会调用 next 函数，将这个 action 传递给下一个中间件。
这就是 redux-thunk 的基本实现原理。通过 redux-thunk 中间件，我们可以在 action 中进行异步操作，并在异步操作完成后再派发真正的 action 对象，从而实现更加复杂的应用逻辑。
© Copyright 2014 - 2025 柏港建站平台 ejk5.com. 渝ICP备16000791号-4