在动作助手中使用 browserhostory.push 是个好主意吗？答案

【问题标题】：Is it a good idea to use browserhostory.push in action helpers?在动作助手中使用 browserhostory.push 是个好主意吗？
【发布时间】：2016-08-12 04:17:32
【问题描述】：

在我的React 应用程序中，我需要根据从服务器收到的数据做出决定。

如果需要数据 (Dispatch actions to update state)
如果数据有错误标签（browserhistory.push('/notfound');）
如果无法解析预期数据 (browserhistory.push('/error');)

在我的应用结构中，我使用了Redux、React-Router 和React-redux-Router 库，但没有使用中间件。我已经让 actionHelpers 进行 ajax 调用，然后使用 Action Creator 调度适当的操作。这些actionHelper 方法在组件中公开以更改状态。我的问题：

处理这些情况的最佳方法是什么？
actionHelper 是做出这些决定的最佳地点吗？

我暂时不想使用任何中间件，但请告诉我使用中间件来处理这些场景是否是个好主意。

【问题讨论】：

当你说改变状态你是指redux状态还是组件状态？而 actionHelpers 只是进行 ajax 调用的方法？
如果你已经在使用react-router-redux，你可以使用它提供的push，这样你的代码看起来更干净。
@Pachu，是的，Action 助手只是函数，我只是在发送操作后从 reducer 更新 redux 状态
@xiaofan2406 我正在使用 react-router-redux 提供的历史来推送状态。我只是想看看这是否是处理此问题的正确方法还是有更好的方法？

标签： reactjs redux react-router react-redux react-router-redux

【解决方案1】：

操作不是您应该进行重定向的地方。此行为应该在组件本身中实现，并且应该留下操作来更新商店。

您可能希望在此处使用Redux-thunk middleware，它允许您调度一个函数（接收dispatch 作为参数而不是对象操作。然后您可以将该函数包装在一个promise 中并在@987654323 中使用它@。

在您的操作文件中：

updateReduxStore(data) {
  return { 
      type: SOME_TYPE,
      payload: data.something
  };
}

fetchAndValidateData() {
  ...
}

checkData() {
    return function(dispatch) {
        return new Promise((resolve, reject) => {
            fetchAndValidateData().then((data) => {
                try {
                    if (JSON.parse(data).length > 0) {
                        dispatch(updateReduxStore(data));
                        resolve('valid data');
                    } else if (data.error) {
                        reject('error in data');
                    }
                }
                catch(err) {
                  reject('malformed data');
                }
            });
        });
    };
}

然后在你的组件中：

componentWillMount() {
    this.props.checkData()
      .then((message) => {
          console.log(message); //valid data
      })
      .catch((err) => {
          if (err === 'error in data') {
              browserHistory.push('/notfound');
          } else if (err === 'malformed data') {
              browserHistory.push('/error');
          }
      });
}

Redux-thunk 中间件专为此类用例而设计。

【讨论】：