Redux is not updating state in react

Question

Redux is not updating state in react in Safari browser only but in chrome it's working fine. when I console the action in case VISITS_SEARCH: I get empty array in Safari. however, I get valid array in chrome console

export const visitsReducer = (state = initialState, action) => {
console.log("🚀 ~ file: visits-reducer.js ~ line 28 ~ visitsReducer ~ action", action)
  return produce(state, (draftState) => {
    switch (action.type) {
      case GET_VISIT_LIST:
        draftState.isWorking = true;
        draftState.error = null;
        return;

      case GET_VISIT_LIST_SUCCESS:
        draftState.isWorking = false;
        draftState.visits = action.visits;
        console.log("🚀 ~ file: visits-reducer.js ~ line 39 ~ returnproduce ~ action", action)
        return;

      case VISITS_SEARCH:
        draftState.searchResults = action.visits;
        console.log("🚀 ~ file: visits-reducer.js ~ line 80 ~ returnproduce ~ action", action)
        
        return;

      default:
        return;
    }
  });
};

Answer 1

I fixed it. It has no relation with fetch at all after wasting time for checking this. In a sort by date function the date was 9999-1-1 which's invalid for Safari I had to change to be 9999-01-01

Answer 2

in redux, you should never change the state that you get from argument. instead you should return the values that you want to change and your value that you dont want to change. because of this you have this problem. you should do this:

  case GET_VISIT_LIST:
    return {
      ...state,
      isworking: true,
      error: null
    }

changing the state that you get from argument in redux toolkit is correct and you can use redux toolkit

Answer 3

I'm assuming you populate data with fetch, This is common issue according to Redux Docs:

We use fetch API in the examples. It is a new API for making network requests that replaces XMLHttpRequest for most common needs. Because most browsers don't yet support it natively, we suggest that you use cross-fetch library:

// Do this in every file where you use `fetch`
import fetch from 'cross-fetch' 

Internally, it uses whatwg-fetch polyfill on the client, and node-fetch on the server, so you won't need to change API calls if you change your app to be universal.

Be aware that any fetch polyfill assumes a Promise polyfill is already present. The easiest way to ensure you have a Promise polyfill is to enable Babel's ES6 polyfill in your entry point before any other code runs:

// Do this once before any other code in your app  import
'babel-polyfill'

Answer 4

It is happening because some browser doesn't support fetch that's why react tells you to use fetch like below:

// Do this in every file where you use `fetch` 
import fetch from 'cross-fetch' 

Alos Check for browser and OS support: https://caniuse.com/#search=fetch

The official Redux docs say: https://redux.js.org/tutorials/fundamentals/part-6-async-logic#note-on-fetch