Redux not updating properties in IE11

user_5887387 0
Viewed 10254

i'm running into a weird issue regarding React & Redux in Internet explorer 11.

I've created a React application with redux & thunk+promise middleware. Said application works completely fine in Chrome, safari and firefox but when running in Internet explorer 11 props aren't being updated by React/Redux.

While checking the network tab i can see that the Http requests are being fired just fine. Logging the result of this within the Redux reducers gives the expected result as well. But it seems as if returning the new state does not update props. Or trigger any re-render of components at all. (Only in IE).

I tried google to see if there were people in the same boat but i couldn't find anything matching my problem.

TLDR; Redux not updating props and triggering re-render / update of components after returning state. (only in IE11).

Reducer:

const customers = (state = {customers: []}, action) => {
    switch (action.type) {
        case GET + _FULFILLED:
            return Object.assign({}, state, {
                customers: action.payload
            });
            break;
    }
}

action.payload has the correct value; returning does not seem to update the props.

Also no errors in the console

SOLVED I had to add an object.assign polyfill; didn't know that was required after using babel

redux reactjs javascript
3 Answers

Had a similar Problem, but the solution was not related to Polyfill (babel-polyfill) as I already had them imported, but to my axios instance configuration. I found the answer to my problem here. Basically all I had to do was disable caching by adding the following header in my axios instance configuration:

const instance = axios.create({
  headers: {
    Pragma: "no-cache"
  }
});

Evidently the other browsers (firefox, chrome etc.) do not cache as much by requests, but in case of IE one has to set these headers explicitly.

user_40393130
Related