IE11 immer reducer does not mutate

[ionescudev]

I tried to use immer reducer with IE11.

Normal immer works fine, however immer reducer does not work and it does not mutate anything really.

inserting code does not work ofc, so ill just paste my code.

---

---

---

import React = require('react'); import as ReactDOM from "react-dom"; import as isolate from 'jss-isolate'; import {createStore} from "redux"; import * as jss from 'jss'; import {ImmerReducer, createReducerFunction, createActionCreators} from "immer-reducer";

type myState = { user: { firstName: string, lastName: string } }

var initialState: myState = { user: { firstName: "Albert", lastName: "Fishers", }, };

var initialState2: myState = { user: { firstName: "Albert", lastName: "Fishers", }, };

import produce from "immer"

const nextState = produce(initialState2, draft => { draft.user.firstName = "testt"; })

console.log(nextState) // the firstname is testt, it works fine

class MyImmerReducer extends ImmerReducer { setFirstName(firstName: string) { this.draftState.user.firstName = firstName; }

setLastName(lastName: string) {
    this.draftState.user.lastName = lastName;
}

}

const ActionCreators = createActionCreators(MyImmerReducer); const reducerFunction = createReducerFunction(MyImmerReducer, initialState);

const store = createStore(reducerFunction);

store.subscribe(function(){ debugger; // the new state does not change still same. console.log(store.getState().user.firstName); ReactDOM.render( , document.getElementById('container') );

})

setTimeout(() => { store.dispatch(ActionCreators.setFirstName("john")) }, 5000);

class Hello extends React.Component<any,any> { render() { return (

{store.getState().user.firstName}

);

} }

--add brackets to hello world in render

ReactDOM.render( Hello name="World" /, document.getElementById('container') );

---

---

---

---

Immer normal version works on IE and chrome immer reducer does not mutate state on ie, works fine on chrome.

In order for my code to work you also need to use a polyfill on IE for 'array.find' and 'array.startswith' and a polyfill with promise.

For speedness sake, here is a file containing all 3, just add a 'script' tag to head of document.

https://jsfiddle.net/j13ndfzs/

Just copy what's inside the 'javascript' section to a 'scripttag' in head.

and my tsconfig is this one:

`{ "compileOnSave": true, "compilerOptions": {

"types": [ "react" ],
"allowJs": true,
"jsx": "react",
"module": "commonjs",
"noImplicitAny": false,
"sourceMap": true,
"lib": [ "es5", "dom" ],
"target": "es5",
"experimentalDecorators": true,
"emitDecoratorMetadata": true

},

"exclude": [ "node_modules", "wwwroot/dist/", "webpack.config.js" ] }

and webpack:

const path = require('path'); var webpack = require('webpack'); module.exports = { entry: './index.tsx', devtool: 'source-map', mode: 'development', // KEY else we get c00 instead of full class name module: { rules: [ { test: /.tsx?$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { extensions: [ '.tsx', '.ts', '.js' ] }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };

[ionescudev]

I see that at some point , 'immer' started using a fallback for IE.

Perhaps immer-reducer is using an old immer as dependency that does not have a fallback for IE.

[esamattis]

It should work. Will look into this soon as I have to ship a product using immer-reducer for IE11.

[esamattis]

Not seeing this. Shipped the product using immer-reducer to IE11 and it works fine.

[esamattis]

Nothing actionable here. Closing. Feel free to re-open if you can prove an example.