1

I have a react/redux/saga project and 2 forms (components): login and register. From those components I'm dispatching the corresponding actions which are related to the authentication reducer.

When the form submission is successful, I save the auth token in the store, that part is ok.

The problem comes when I get an error from the server, for example: "wrong user or password".

I don't think that information is relevant for being stored in redux state, but want to display the error in the form.

Options:

  • a) If I store the error using the auth reducer, I have to clear errors before switching between login or register because the error field is shared.
  • b) I could create 2 reducers, one for auth and another for handling the ui. Auth reducer would be interested in getting the token and ui in getting the error field from the ajax response.
  • c) Not sure if this is correct, but, should I perform ajax from the component and store errors in the component state (or hooks)

redux-form library stores form state in the store, so maybe option b) is not so bad.

Which strategy is better?

Polak
  • 656
  • 13
  • 22
  • 1
    I think the most simple way is to just handle it at the component. You can make reducers but then if you start to get more and more forms you will end up with a lot of reducers and in my opinion a lot of unnecessary code. If you handle it at the component then if successful dispatch if not display a message. A simple fetch or axios call won't really add much code to your component if you are worried about component size. – Steve K Oct 06 '19 at 18:38
  • Yeah, I agree, so, you mean, I should just perform the ajax, on success -> dispatch the action for storing the auth token, on error -> display errors. I saw many redux examples where people have that value "isFetching" in the store, and 3 actions (login request/success/failed). So I'm curious why is so hard to find out simpler examples like ours, here's a similar question https://stackoverflow.com/questions/48925561/how-to-handle-ui-state-in-redux-react-redux-ui – Polak Oct 06 '19 at 19:35

0 Answers0