将回调添加到Redux还原器中

Question

是否有任何错误/抗模式(以'为'思考in-react/redux '(添加到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) }
}))    

Answer 1

这个想法不是错误的，实现是。

而不是添加回调，而是从操作中返回承诺(您需要Redux-Thunk中间件或一些类似的选择(。

然后您可以简单地做：

dispatch(myAction).then(callback);

当然，您也可以简单地派遣回调中的另一个动作，这通常是一个复合动作。

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

Answer 2

redux的第三个原理(在文档的简介部分中列出(是的更改是用纯函数进行的'。

纯函数是一个函数，在相同的输入中总是返回相同结果，并且不会引起任何副作用。有一个回调的记录肯定是副作用！

文档继续说：

还原器保持纯净非常重要。您永远不应该在还原器内部做的事情：

• 变异其论点;
• 执行API调用和路由过渡等副作用;
• 调用非纯函数，例如date.now((或Math.random((。

这背后的原因是，它使您的还原器可预测 - 您知道，如果有一个有效负载的措施，您保证具有相同的输出。这使您的应用程序既易于理解为开发人员，又更易于单元测试。

如果您想在发生操作时执行副作用，则应安装允许您这样做的中间件 - 其中一些常见示例是：

• redux-thunk，它允许您派遣可以依次派遣操作的功能(通常用于进行API调用(
• redux-logger，它允许您注销派遣的动作。
• redux-devtools-扩展，它使您可以在Chrome Devtools扩展中查看状态和动作。

如果找不到可以执行您需要的中间件软件包(老实说 - 已经有很多！(，您可以很容易地写自己的书。

Answer 3

回调会引入副作用，因此，当使用redux时，您应该考虑返回带有结果的新状态，例如用 done: true flag，对 componentDidUpdate中的反应。

。

用于管理异步和效果，您可以使用redux-saga，redux-thunk，rxjs或其他库。如果您想坚持回调，为什么还要使用Redux？