Reactjs 使用browserhostory.push-in-action助手是个好主意吗？

在我的

React

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

如果需要数据（

调度操作以更新状态

）

如果数据有错误标记（

browserhistory.push（'/notfound'）；

）

如果无法分析预期数据（

browserhistory.push（'/error'）；

）

在我的应用程序结构中，我使用的是

Redux

、

React-Router

和

React-Redux-Router

库，但没有中间件。我让actionHelpers进行ajax调用，然后使用ActionCreator发送适当的操作。这些

actionHelper

方法在组件中公开以更改状态。 我的问题是:

处理这些情况的最佳方法是什么

actionHelper

是做出这些决定的最佳场所吗

---

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

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

您可能希望在此处使用，它允许您分派函数（接收

dispatch

作为参数，而不是对象操作。然后您可以将该函数包装在承诺中，并在

组件willmount

中使用它

在您的操作文件中：

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中间件是为此类用例而设计的。

操作不是执行重定向的地方。此行为应在组件本身中实现，操作应保留以更新存储

您可能希望在此处使用，它允许您分派函数（接收

dispatch

作为参数，而不是对象操作。然后您可以将该函数包装在承诺中，并在

组件willmount

中使用它

在您的操作文件中：

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中间件就是为这样的用例而设计的。

当你说要改变状态时，你指的是Redux状态还是组件状态？ActionHelper只是进行ajax调用的方法？如果你已经在使用

react-router-Redux

，你可以使用它提供的

push

，这样你的代码看起来更干净。@Pachu，是的操作帮助程序只是函数，我只是在操作完成后从还原程序更新redux状态despatched@xiaofan2406我正在使用react router redux提供的历史来推送状态。我只是想看看这是否是处理此问题的正确方法，或者是否有更好的方法？当您说要更改状态时，您指的是redux状态或组件state？而actionHelpers只是进行ajax调用的方法？如果您已经在使用

react router redux

，您可以使用它提供的

push

，这样您的代码看起来更干净。@Pachu，是的，Action helpers只是函数，我只是在操作完成后从redux中更新redux状态despatched@xiaofan2406我是usi由react router redux提供的ng历史来推送状态。我只是想看看这是否是处理此问题的正确方法，或者是否有更好的方法？