添加回调到Redux Reducer

Question

是否有任何错误/反模式(在' 思考反应/减少 '方面)添加回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的第三个原则(在文档的引言部分中列出)是"使用纯函数进行更改".

纯函数是在给定相同输入的情况下始终返回相同结果的函数,并且不会导致任何副作用.有一个回调日志的东西绝对是一个副作用!

文档继续说:

减速机保持纯净非常重要.你应该在减速机内做的事情:

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

这背后的原因是它使你的减速器可以预测 - 你知道,给定具有某个有效载荷的动作,你可以保证具有相同的输出.这使您的应用程序作为开发人员更容易理解,并且更容易进行单元测试.

如果要在执行操作时执行副作用,则应安装允许您这样做的中间件 - 这些的一些常见示例是:

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

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

Answer 2

这个想法没有错,实施是.

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

然后你可以简单地做:

dispatch(myAction).then(callback);

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

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

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