Question

我无法弄清楚如何使用redux构建代码。这是我正在关注的高级流程：

操作成功执行，并触发history.push('/something')
这导致要加载的新组件Something
在Something.componentWillMount()中，我想获取该组件的一些数据，因此我调用this.props.loadSomething()，这是另一个操作

步骤（3）是问题。由于history.push()调用是在一个操作中，因此redux不允许我调用this.props.loadSomething()，因为这将调用操作中的操作。

处理此问题的正确方法是什么？我觉得这一定是一个非常普遍的问题，所以应该有一个标准的方法。

Answer 1

您所看到的确实是一种常见情况。解决问题的简单方法是使用thunk。

它基本上是为了你可以同时调度多个动作而构建的，它们甚至可以是异步的。

您可以找到相关文档here。

应用中的示例用法，动作创建者：

export function doSomething(someParam, someOtherParam) {
  return dispatch => {
    dispatch(someOtherActionCreator(someParam));
    dispatch(loadMyDataActionCreator(someParam, someOtherParam));
  };
}

您可能只有在加载数据后才能重定向。你也可以用thunks做到这一点。

export function fetchMeStuffNRedirect(params) {
  return dispatch => {
    return dispatch(loadSomeStuffThatReturnsPromise())
    .then(result => dispatch(doSomethingWithResult(result))
    .catch(error => dispatch(awSnapActionCreator(error));
  };
}

如何在使用redux

1 个答案: