使用Redux的错误消息提示（Redux-Saga）

Question

In the current project, I am using React and Redux-Saga.

• APIs will called in actions and effect.
• Data, errors and loading status will be stored for each page as below.

{ page1: {data: {}, error: null, loading: false}, page2: {data: {}, error: null, loading: false} }

• When API is to be called, update store with {data: {}, error: null, loading: true} .
• After successful call, update store with {data: {// data here}, error: null, loading: false} .
• After bad request, update store with {data: {}, error: 'error', loading: false} .

In the page, in the function of componentWillReceiveProps , if error is not null, the page will prompt error message.

However, it causes a problem that -- if I go to another page and then go back, as the error in store will not change or be reset, the page will prompt error before the API is called.

Apparently, it is not the right way.

I get over this by 2 ways:

1. Clear the store as {data: {}, error: null, loading: false} .
2. In componentWillReceiveProps , because error will only be stored after bad request, check if prev error == [] and next error to prompt or not.

I am new developer and I have no idea that if they are right ways.

Could you guys give me some helps!! Thanks a lot!

Answer 1

I think the good way is to clear the error , when component will unmount.

componentWillUnmount() {
    // call action to clear error
}

For more information about componentWillUnmount: https://reactjs.org/docs/react-component.html#componentwillunmount

Answer 2

I would suggest moving errors to a different branch of redux state. I would organise the state as

state = {
  data: {
    page1: {}, page2: {}, page3: {}
  },
  error: null,
  loading: false,
}

Now, Whenever you change to a new page, reset the error to null and set it when error occurs. This will simplify the process.

If you do not want to change the way redux state is organised, then

componentWillUnmount() {
   // Dispatch action to reset the error
}