使用 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，returns一个函数以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。

它是中间件，因此它可以在您定义的每个操作中提供分派和状态对象，而无需触及您的组件代码。
当您传递来自 props 或来自创建闭包的 mapDispatchToProps(react-redux) 的调度函数时。此闭包会一直消耗内存，直到异步操作完成。
当你想要调度任何动作时，在完成后或在异步操作中你需要传递调度函数，在这种情况下你需要修改两个文件，比如你的组件和动作。
如果某些东西已经可用并经过大量努力和社区支持测试，为什么不使用它。
您的代码将更具可读性和模块化。
这两种方法的最坏情况，比如在完成项目后，需要更改 thunk 方法，您可以使用自定义中间件代码轻松模拟 thunk 中间件并解决它，但在传递调度函数的情况下它将重构所有代码并搜索和替换并找到管理它的方法。

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

What's the point of using Redux-Thunk vs normal async code? [Examples Included]

redux

redux-thunk

react-redux