Question

快速回答问题，下面的代码有什么问题吗？我之前做过类似的事情，但对此感到不舒服，在组件内捕获http错误而不是调度FAILURE_ACTION，我这样做的原因是为了防止我在我的商店中出现不必要的状态，通常这些状态只是使用过一次，在整个应用程序的整个生命周期中都没有意义。

动作

const createAccount = data => dispatch => axios.get().then(() => {
  dispatch({ type: 'SIGNUP' });
})

组件

export default class SignupForm extends Component {
   handleSubmit = () => {
      createAccount.catch(function (err) {
         this.setState({ error: err.message });
      });
   }

   render(){
      return (
          <form onSubmit={handleSubmit}>
            <span>{this.state.error}</span>
            //...fields
          </form>
      );
   }
}

Answer 1

React和Redux都没有规定你应该以某种方式做任何事情。他们有最佳实践和建议，但如果代码适合你，那么请使用它。

也就是说，一般来说，保持组件尽可能简单，并将这种逻辑推迟到其他地方是一个好主意。它可以保持您的组件清洁，没有副作用，这使它们更易于维护和更容易推理。这就是为什么外部国家经理首先存在的原因之一。

在您的示例中，您现在有两个可以遵循的路径，一个在Redux中，另一个在组件中继续。您的代码的哪一部分负责处理错误？组件中捕获的错误究竟是什么？它是否也是由reducer中的编码错误引起的错误（因为选择了axios调用的响应状态）？是否所有组件都需要实现自己的错误处理？

另外，我希望createAccount是一个函数，而createAccount（）。catch只有在该函数返回axios promise时才能工作。

Answer 2

如果有任何其他组件有兴趣知道注册操作是否失败并且该信息需要持久化，由其他组件共享，或者是否由开发人员检查以了解程序状态，那么它应该进入Redux商店。

但是在你的情况下，我认为没有必要将状态外部化为Redux，使用组件的本地状态来处理错误是完全有意义的。

React Redux：捕获组件中的错误

2 个答案: