使用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函数的情况下,它会重构所有的代码,并搜索和替换并找到管理它的方法。

给TA打赏
共{{data.count}}人
人已打赏
解决方案

在WP Genesis菜单中添加类,不包括其他菜单的类。

2022-5-13 18:00:26

解决方案

如何处理pandas中互相补充的重复数据?

2022-5-13 18:00:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索