Nicky Romeijn Nicky Romeijn - 15 days ago 6
React JSX Question

Redux not updating properties in IE11

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

Answer

This problem is because of IE11's poor ES6 suppport. I found that you need to polyfill both Promises and Object.assign.

As for Babel, it's probably due to Babel transpiling only non-standard code to standard code. Most browsers already implement Promises/Object.assign by default so I guess the newest Babel versions doesn't need to transpile it to ES5 code anymore

Comments