re: Fetching data from an api using React/Redux VIEW POST


Hi, great post! Instead of using your shouldComponentRender() function, have you considered using componentWillRecieveProps then setting the pending 'state' on this.state similar to this:

  componentWillReceiveProps(nextProps) {
      requestSuccessful: nextProps.success, 
      requestPending: nextProps.pending, 
      requestFailed: nextProps.error });

Then instead of this:

if(!this.shouldComponentRender()) return <LoadingSpinner />

you could use:

if(this.state.requestPending) return <LoadingSpinner />

I think it looks neater and allows you to do something based on state, rather than basing it on whether or not a function was called.
Let me know your thoughts! :)


Thank you very much for the comment Calum. :)

I did it a long time like you described and the solution was great. Then componentWillRecieveProps was marked as UNSAFE_componentWillReceiveProps in React 16.3. It will become deprecated in React 17 and the new getDerivedStateFromProps is here.

So I was wondering how I would solve this without depending to much on changes within the React lifecycle methodes and came up with my solution for the problem.

Putting the code into a function that sounded like a lifecycle method was my approach to keep the code readable and make everyone understand what is happening even if the code gets complicated. I keept it that way. :D

Also, I never got the idea why you would put state from redux into the react state if there is no reason to. I mean, you copy data from one state to another without doing anything with it. Seems like a waste of time. Can you enlighten me? Is there any benefit?


Even better :

let { requestPending } = this.state;

{ requestPending && <LoadingSpinner /> }
code of conduct - report abuse