Update Immer to 8.x (#821)

docs/tutorials/basic-tutorial.md

@@ -9,7 +9,7 @@ hide_title: true
 
 Welcome to Redux Toolkit ! This tutorial will show you the basic functions that are included with Redux Toolkit (also known as "RTK" for short).
 
-This tutorial assumes that you are already familiar with the concepts of the core Redux library, as well as how to use it with React. If you aren't, please take some time to read through the [Redux docs](https://redux.js.org) and [React-Redux docs](https://react-redux.js.org) first, as the explanations here focus on how RTK usage differs from "typical" Redux code.
+This tutorial assumes that you are already familiar with the concepts of the core [Redux](https://redux.js.org) library, as well as how to use it with [React](https://reactjs.org). If you aren't, please take some time to read through the [Redux docs](https://redux.js.org) and [React-Redux docs](https://react-redux.js.org) first, as the explanations here focus on how RTK usage differs from "typical" Redux code.
 
 ## Introduction: Writing a Counter Application
 

etc/redux-toolkit.api.md

@@ -13,6 +13,7 @@ import { current } from 'immer';
 import { DeepPartial } from 'redux';
 import { Dispatch } from 'redux';
 import { Draft } from 'immer';
+import { freeze } from 'immer';
 import { Middleware } from 'redux';
 import { OutputParametricSelector } from 'reselect';
 import { OutputSelector } from 'reselect';
@@ -271,6 +272,8 @@ export interface EntityStateAdapter<T> {
 // @public (undocumented)
 export function findNonSerializableValue(value: unknown, path?: ReadonlyArray<string>, isSerializable?: (value: unknown) => boolean, getEntries?: (value: unknown) => [string, any][], ignoredPaths?: string[]): NonSerializableValue | false;
 
+export { freeze }
+
 // @public
 export function getDefaultMiddleware<S = any, O extends Partial<GetDefaultMiddlewareOptions> = {
     thunk: true;

package.json

@@ -61,7 +61,7 @@
     "src"
   ],
   "dependencies": {
-    "immer": "^7.0.3",
+    "immer": "^8.0.0",
     "redux": "^4.0.0",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0"

src/createReducer.test.ts

@@ -50,6 +50,48 @@ describe('createReducer', () => {
     behavesLikeReducer(todosReducer)
   })
 
+  describe('Immer in a production environment', () => {
+    let originalNodeEnv = process.env.NODE_ENV
+
+    beforeEach(() => {
+      jest.resetModules()
+      process.env.NODE_ENV = 'production'
+    })
+
+    afterEach(() => {
+      process.env.NODE_ENV = originalNodeEnv
+    })
+
+    test('Freezes data in production', () => {
+      const { createReducer } = require('./createReducer')
+      const addTodo: AddTodoReducer = (state, action) => {
+        const { newTodo } = action.payload
+        state.push({ ...newTodo, completed: false })
+      }
+
+      const toggleTodo: ToggleTodoReducer = (state, action) => {
+        const { index } = action.payload
+        const todo = state[index]
+        todo.completed = !todo.completed
+      }
+
+      const todosReducer = createReducer([] as TodoState, {
+        ADD_TODO: addTodo,
+        TOGGLE_TODO: toggleTodo
+      })
+
+      const result = todosReducer([], {
+        type: 'ADD_TODO',
+        payload: { text: 'Buy milk' }
+      })
+
+      const mutateStateOutsideReducer = () => (result[0].text = 'edited')
+      expect(mutateStateOutsideReducer).toThrowError(
+        'Cannot add property text, object is not extensible'
+      )
+    })
+  })
+
   describe('given pure reducers with immutable updates', () => {
     const addTodo: AddTodoReducer = (state, action) => {
       const { newTodo } = action.payload

src/index.ts

@@ -1,6 +1,6 @@
 import { enableES5 } from 'immer'
 export * from 'redux'
-export { default as createNextState, Draft, current } from 'immer'
+export { default as createNextState, Draft, current, freeze } from 'immer'
 export {
   createSelector,
   Selector,