Question

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

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

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

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

我现在不想使用任何中间件，但如果使用中间件来处理这些情况，请告诉我。

Answer 1

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

你可能想在这里使用Redux-thunk middleware，它允许你调度一个函数（接收dispatch作为参数而不是对象动作。然后你可以将这个函数包装在一个promise中并使用它在componentWillMount。

在您的操作文件中：

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

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

1 个答案: