使用Redux-Thunk与普通异步代码有什么意义？[包括示例]

Question

我一直很难理解Redux thunk，因为它真的不明白它有什么伟大的用途。例如，我在一个网站上找到了一个随机的Redux Thunk示例：

export const addTodo = ({ title, userId }) => {
return dispatch => {
dispatch(addTodoStarted());
axios
.post(ENDPOINT, {
title,
userId,
completed: false
})
.then(res => {
setTimeout(() => {
dispatch(addTodoSuccess(res.data));
}, 2500);
})
.catch(err => {
dispatch(addTodoFailure(err.message));
});
};
};

看起来很简单，addTodo是一个接受title和userId的函数，并返回一个以dispatch为参数的函数，然后该函数一次又一次地使用dispatch来响应HTTP请求。因为在这种情况下使用的是Redux Thunk，所以您只需要执行dispatch(addTodo(x,x));

我为什么不做这样的事呢？

function addTodo(dispatch, title,userId){
dispatch(addTodoStarted());
axios
.post(ENDPOINT, {
title,
userId,
completed: false
})
.then(res => {
setTimeout(() => {
dispatch(addTodoSuccess(res.data));
}, 2500);
})
.catch(err => {
dispatch(addTodoFailure(err.message));
});
}

然后在任何地方，我都可以打电话给addTodo(dispatch, x, x);

为什么我会使用Redux Thunk的例子而不是我自己的例子？

Answer 1

以下几点我将试图解释为什么应该使用redux thunk。

1. 它的中间件，因此它将使调度和状态对象在您定义的每个操作中都可用，而无需接触组件代码。

2. 当您传递来自props或创建闭包的mapDispatchToProps(react redux(的调度函数时。这种关闭会一直消耗内存，直到asyc操作完成。

3. 当你想调度任何操作时，在完成或异步操作后，你需要传递调度函数，在这种情况下，你需要修改两个文件，比如你的组件和操作。

4. 如果某个东西已经可用，并经过大量努力和社区支持进行了测试，为什么不使用它呢？

5. 您的代码将更加可读和模块化。

6. 对于这两种方法来说，最糟糕的情况是，在完成项目后，需要更改thunk方法，您可以用自定义中间件代码轻松地模拟thunk中间件并解决它，但在传递调度功能的情况下，它将重构所有代码，搜索、替换并找到管理它的方法。