向 Redux Reducer 添加回调

IT技术 reactjs callback redux
2021-04-29 18:45:57

在将回调添加到传递到动作中时会不会有任何错误/反模式(就“思考中的react/还原”而言)action.data

// reducer
ACTION_FOR_REDUCER() {
  var x = 123
  if ( action.data.callback ) action.data.callback( x )
  return {
    something: action.data.somedata
  }
},

然后在调用操作时稍后在应用程序中访问该数据(可能在容器中)

// later in the app
this.props.dispatch(changeSomething({
  somedata: somedata,
  callback: (x) => { console.log(x) }
}))    
3个回答

想法没有错,执行才是。

不要添加回调,而是从操作中返回一个Promise(您将需要redux-thunk中间件或一些类似的替代方案)。

然后你可以简单地做:

dispatch(myAction).then(callback);

当然,您也可以在回调中简单地调度另一个动作,这通常最终成为一个复合动作。

const myAction = ...
const callbackAction = ...

const compoundAction = () => dispatch => {
     dispatch(myAction())
         .then(() => dispatch(callbackAction()));
};

Redux 的第三个原则(在文档介绍部分列出)是“使用纯函数进行更改”

纯函数是在给定相同输入的情况下始终返回相同结果的函数,并且不会引起任何副作用。让回调记录一些东西肯定会产生副作用!

文档继续说:

减速器保持纯净非常重要。在减速器中你永远不应该做的事情:

  • 改变它的论点;
  • 执行 API 调用和路由转换等副作用;
  • 调用非纯函数,例如 Date.now() 或 Math.random()。

这背后的原因是它使您的减速器可预测 - 您知道,给定具有特定负载的操作,您可以保证具有相同的输出。这使您的应用程序作为开发人员更容易理解,也更容易进行单元测试。

如果你想在一个动作发生时执行副作用,你应该安装一个允许你这样做的中间件 - 其中一些常见的例子是:

  • redux-thunk,它允许您调度可以依次调度操作的函数(通常用于进行 API 调用)
  • redux-logger,它允许您注销已调度的操作。
  • redux-devtools-extension,它允许您在 Chrome devtools 扩展程序中查看您的状态和操作。

如果您找不到可以满足您需要的中间件包(说实话,很少见 - 已经有很多了!),您可以很容易地编写自己的包

回调会引入副作用,因此在使用 Redux 时,您应该考虑使用结果返回一个新状态,例如带有done: true标志并在componentDidUpdate.

为了管理异步和效果,您可以使用redux-sagaredux-thunkRxJs或其他库。如果您想坚持使用回调,为什么还要费心使用 Redux?