Question

是否会出现任何错误/反模式（在“ think-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的第三个原则（在introduction section of the docs中列出）是'更改是使用纯函数'。

纯函数是一个函数，它总是在给定相同输入的情况下返回相同的结果，并且不会产生任何副作用。有一个回调日志肯定是一个副作用！

The docs go on to say:

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


改变其论点;

执行API调用和路由转换等副作用;

调用非纯函数，例如Date.now（）或Math.random（）。

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

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

redux-thunk，它允许您调度可以依次调度操作的函数（通常用于调用API）
redux-logger，允许您注销已分派的操作。
redux-devtools-extension，可让您在Chrome devtools扩展程序中查看您的状态和操作。

如果你找不到能够满足你需要的中间件包（很少见，说实话 - 那里已经很多了！），你可以很容易地write your own。

Answer 2

这个想法没有错，实施是。

不是添加回调，而是从操作返回一个承诺（您需要redux-thunk中间件或一些类似的替代方案。）

然后你就可以做到：

dispatch(myAction).then(callback);

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

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

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

Answer 3

回调引入了副作用，因此在使用Redux时，您应该考虑使用结果返回一个新状态，例如使用done: true标志并对componentDidUpdate中的结果作出反应。

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

Answer 4

很长一段时间后回到此...

@Sulthan找到了解决方法- redux thunks

如果它可以帮助任何人，而不是像这样写你的动作...

export const someAction = data => {
  return {
    type: 'NAMESPACE_SOME_ACTION',
    data: data
  }
}

...改为这样写他们...

export const someAction = data
  => dispatch
  => Promise.resolve().then(()
  => dispatch({ type: 'NAMESPACE_SOME_ACTION', data }))

...所以它们可以像这样使用...

const someFunc = async () => {
  await props.dispatch(someAction(data))
  doAfterWaiting()
}

添加回调到Redux Reducer

4 个答案: