使用浏览器历史记录是个好主意吗?推动行动助手

Question

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

1. 如果需要数据(Dispatch actions to update state)
2. 数据有错误标签(browserhistory.push('/notfound');)
3. 如果期望的数据无法解析(browserhistory.push('/error');)

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

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

我现在不想使用任何中间件，但请让我知道使用中间件来处理这些场景是否是个好主意

Answer 1

动作不是你应该重定向的地方。此行为应该在组件本身中实现，而操作应该留给更新存储。

你可能想在这里使用Redux-thunk中间件，它允许你调度一个函数(它接收dispatch作为参数而不是对象操作)。然后，您可以将该函数包装在承诺中，并在componentWillMount中使用它。

在你的actions文件中:

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中间件是为这样的用例制作的。