React Redux：捕获组件中的错误

Question

Quick question on react, is anything wrong with the code below? I have done something like this before but did not feel comfortable about it, catching http errors inside the component rather than dispatching an FAILURE_ACTION, the reason I do this is to prevent me from having unnecessary states in my store, often times these states are only used once and won't make sense to live for the entire life time of the application.

Action

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

Component

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

Neither React nor Redux dictates that you should do anything in a certain way. They have best practises and recommendations ofcourse, but if the code works for you, then roll with it.

That said, generally it's a good idea to keep your components as simple as possible and to defer this kind of logic elsewhere. It keeps your component clean and free from side-effects, which makes them more maintainable and easier to reason about. Thats one of the reasons why external state managers exist in the first place.

In your example, you now have two paths that can be followed, one is in Redux, and the other carries on in your component. Which part of your code is responsible for handling errors? What error is caught in your component exactly? Could it also be an error caused by a coding mistake in your reducer (as oposed to a response status from the axios call)? Do all components need to implement their own error handling?

Also, I would expect that createAccount is a function and that createAccount().catch can only work if that function return the axios promise.

Answer 2

If there is any other component that is interested in knowing if Sign up operation failed and that information needs to be persisted, shared by other components, or inspected by a developer in order to understand the program state, it should go in the Redux store.

But here in your case i think there is no need to externalize state to Redux and it perfectly make sense to use component's local state to deal with errors.