使用Redux-Thunk与普通异步代码有什么区别？[包括实例]

我一直在苦恼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是一个函数，它接收标题和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的例子而不是我自己的例子？

解决方案：

这里有几个要点，通过这些要点，我将试着解释为什么应该使用redux-Thunk。

1. 它是一个中间件，所以它会在你定义的每一个动作中提供调度和状态对象，而不会触动你的组件代码。

2. 当你通过props或mapDispatchToProps(react-redux)中的dispatch函数时，它会创建闭包。这个闭包会保存消耗的内存，直到asyc操作结束。

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

4. 如果有些东西已经可以使用，并且经过了大量的努力和社区支持的测试，为什么不使用它呢？

5. 你的代码会更加可读和模块化。

6. 对于这两种方法来说，最坏的情况是，比如说在项目完成后，需要改变thunk的方法，你可以很容易地用你的自定义中间件代码来模拟thunk中间件并解决它，但是在传递dispatch函数的情况下，它会重构所有的代码，并搜索和替换并找到管理它的方法。