title: Setting state to a zero-filled array with Immer in react-toolkit
body: <p>I was following the <a href="https://redux-toolkit.js.org/usage/usage-with-typescript" rel="nofollow noreferrer">TS usage docs</a> and now I'm trying to clear an array using Redux Toolkit but my <code>turnOffAll(state)</code> reducer causes thousands of rerenders (console log outputs) and an error about it in the browser.</p>
  <p>I have <a href="https://redux-toolkit.js.org/usage/immer-reducers#resetting-and-replacing-state" rel="nofollow noreferrer">read</a> that it's possible to <code>return</code> state, rather than &quot;mutate&quot; it from within <code>turnOffAll</code>.
  So I've tried a variation of <code>turnOffAll</code> having: <code>return Array(screenSize.width * screenSize.height).fill(0)</code> but this causes an error in app.jsx that <code>dispatch(turnOffAll());</code> does not provide enough arguments.</p>
  <p>Another approach I tried in <code>turnOffAll</code> is <code>state = initialState;</code> but while this doesn't cause unnececary rerenders, the state is not reset if I do a <code>console.log(useAppSelector((state) =&gt; state.pixels));</code> in app.jsx.</p>
  <p>The relevant info from the files are below. This code is the situation in my first paragraph above and causes thousands of rerenders when calling <code>dispatch(turnOffAll());</code> from app.jsx:</p>
  <p>pixelsSlice.ts:</p>
  <pre><code>import { createSlice, PayloadAction } from &quot;@reduxjs/toolkit&quot;;
  import type { RootState } from &quot;./store&quot;;
  import { Pixel, ScreenSize } from &quot;./types&quot;;
  
  //Defining a type for the slice state
  interface PixelsState {
    pixels: Array&lt;number&gt;;
  }
  
  const screenSize = { width: 128, height: 59 };
  
  //Define the initial state using the above type.
  const initialState: PixelsState = {
    pixels: Array(screenSize.width * screenSize.height).fill(0),
  };
  
  export const pixelsSlice = createSlice({
    name: &quot;pixels&quot;,
    initialState,
    reducers: {
      turnOn(state, action: PayloadAction&lt;Pixel&gt;) {
        //This may look like mutating state, but Immer makes it ok:
        state.pixels[
          screenSize.width * action.payload.row + action.payload.column
        ] = 1;
      },
      turnOffAll(state) {
        state = initialState;
      },
    },
  });
  
  export const { turnOn, turnOffAll } = pixelsSlice.actions;
  
  //Other code such as selectors can use the imported `RootState` type...
  export const selectPixels = (state: RootState) =&gt; state.pixels;
  
  export default pixelsSlice.reducer;
  
  </code></pre>
  <p>app.tsx:</p>
  <pre><code>import React, { useEffect } from &quot;react&quot;;
  import { useAppSelector, useAppDispatch } from &quot;./app/hooks&quot;;
  import { turnOn, turnOffAll } from &quot;./app/pixelsSlice&quot;;
  import type { Pixel } from &quot;./app/types&quot;;
  
  function App() {
    const dispatch = useAppDispatch();
  
    //Demonstrating reading and writing pixels from the redux store.
    console.log(useAppSelector((state) =&gt; state.pixels));
  
    let p: Pixel = { row: 1, column: 2 };
    dispatch(turnOn(p));
    console.log(useAppSelector((state) =&gt; state.pixels));
  
    dispatch(turnOffAll()); //THIS CAUSES THOUSANDS OF RERENDERS AND CONSOLE LOG OUTPUTS :(
    console.log(useAppSelector((state) =&gt; state.pixels));
  
    return &lt;div className=&quot;App&quot;&gt;&lt;/div&gt;;
  }
  
  export default App;
  </code></pre>
  <p>hooks.ts:</p>
  <pre><code>import { TypedUseSelectorHook, useDispatch, useSelector } from &quot;react-redux&quot;;
  import type { RootState, AppDispatch } from &quot;./store&quot;;
  
  // Use throughout your app instead of plain `useDispatch` and `useSelector`
  export const useAppDispatch = () =&gt; useDispatch&lt;AppDispatch&gt;();
  export const useAppSelector: TypedUseSelectorHook&lt;RootState&gt; = useSelector;
  </code></pre>