CODEWITHSUNDEEP
javascriptreactjsredux
Asif Biswas
Asif Biswas

Reputation: 171

setState in redux from fetch()

I'm new in redux. Is it the right way to setState?

How do I setState forYou after fetching data from server?

here is my code:

const initialState={
    forYou: [],
}


function rootReducer(state=initialState, action){
    switch (action.type){
        case 'forYou':
            var url = 'http://127.0.0.1:8000/forYou/'
            fetch(url, {
                method: 'GET',
                headers:{
                    'Content-Type': 'application/json',
                }
            }).then(res=>res.json().then(result=>{
                var forYou = result
                return{
                    ...state,
                    forYou: forYou
                }
            }))
        
        break


        default:
            return state;
    }
}

export default rootReducer

So, what i should change?

Upvotes: 0

Views: 62

Answers (1)

ray
ray

Reputation: 27245

Your reducer must return new state, synchronously, which you're not doing.

The return in your then isn't the return value from your reducer function, it's the return value from the then function, which is ultimately what the fetch call chain will resolve to.

Returning the resolved value (e.g. return fetch(...)) won't work either, because fetch is asynchronous. Its return value is a Promise, not the resolved state.

There are off-the-shelf libraries like saga and thunk to help with this sort of thing, but the basic idea is the same: Move your asynchronous code out to a separate function and have it dispatch state transitions:

// pseudo-code, not an actual implementation
async function forYou () {
  // transition into a loading state; display a spinner or whatever
  dispatch({ type: LOADING, value: true });

  // await the fetch
  const result = await fetch(...);

  // once the fetch completes, dispatch an action with the result
  dispatch({ type: FOR_YOU, value: result })

  // and transition out of the loading state
  dispatch({ type: LOADING, value: false })
}

Upvotes: 2

Related Questions