title: Redux Thunk, Modifying state: Unhandled promise rejection: Error: [Immer] Immer only supports setting array indices and the 'length' property]
body: <p>While working on a React Native application with a persistent Redux store (in TypeScript) I ran into the following problem:</p>
  <p>I built a Thunk that queries an API, this API sends back a set of question data in a fetch. This fetch works fine, but when trying to save any data to the Redux Store using <code>extraReducers</code> I get errors.</p>
  <p>My code looks like this:</p>
  <p>First I call a dispatch on the Thunk in my page:</p>
  <pre><code>questionpage.tsx
  
  -stuff-
  
      useEffect(() =&gt; {
          console.log('dispatching fetch')
          dispatch(fetchQuestions())
  
      }, []);
  
  -render stuff-
  </code></pre>
  <p>The actual thunk looks like this and does a fetch to my API:</p>
  <pre><code>export const fetchQuestions = createAsyncThunk('questions/fetchquestions', async () =&gt;{
      let headers = new Headers();
      headers.append('Authorization', 'Basic ' + Base64.btoa(email + &quot;:&quot; + password))
      
      const response = await fetch(api + &quot;/api/questions&quot;, {
              headers: headers,
              method: 'GET'
          })
      const stuff = await response.json();
      console.log(stuff)
      return stuff;
  
  })
  </code></pre>
  <p>Then:</p>
  <pre><code>questionSlice
  
      extraReducers: (builder) =&gt; {
          builder.addCase(fetchQuestions.pending, (state, action) =&gt; {
            state.status = 'loading' // &lt; when I comment this the console.log works
            console.log('pending')
          }),
          builder.addCase(fetchQuestions.fulfilled, (state, action) =&gt; {
            state.status = 'succeeded'
            // Add any fetched posts to the array
            state.questions = state.questions.concat(action.payload) // &lt; comment this, console.log works
            console.log('fulfilled')
          })
          builder.addCase(fetchQuestions.rejected, (state, action) =&gt; {
            state.status = 'failed' // &lt; when I comment this the console.log works
            state.error = action.error.message // &lt; when I comment this the console.log works
            console.log('rejected')
          })
        } 
  </code></pre>
  <p>As you see above: In my reducer I use the <code>extraReducers</code> to catch the different results this Thunk can produce. This works, but only when I modify nothing in the state. If I try to save anything to the state I get the following error:</p>
  <pre><code>[Unhandled promise rejection: Error: [Immer] Immer only supports setting array indices and the 'length' property]
  </code></pre>
  <p>This error occurs at all times, it occurs when I modify <code>state.status</code>, which is a String, not an Array, it also occurs when I modify <code>state.error</code> and <code>state.questions</code>
  The last one is an array, but the other two are not.</p>
  <p>I looked at a lot of other questions but couldn't find this specific scenario anywhere and am fairly lost on how to proceed.</p>
  <p>Update:
  My problem stems from <code>Immer</code>. If I understand the documentation correctly <code>Immer</code> should allow me to do updates of objects in the Redux state, but I cannot get it to work:</p>
  <pre><code>
  export const questionSlice = createSlice({
      name: 'question',
      initialState,
      reducers: { 
          save: (state, action) =&gt; {
              state.questions.push(action.payload) &lt; this action works
          }
      },
      extraReducers: (builder) =&gt; {
          builder.addCase(fetchQuestions.fulfilled, (state, action) =&gt; {
            state.questions.push(action.payload) &lt; this action errors
          })
  </code></pre>
  <p>Edit 2:</p>
  <p>Pointed towards this direction and posting my state here. The app only has one current Slice, the QuestionSlice from earlier, with this state:</p>
  <pre class="lang-js prettyprint-override"><code>interface questionState {
      questions: object[],
      status: 'idle' | 'loading' | 'succeeded' | 'failed',
      error: string | undefined
  }
  
  const initialState: questionState = {
      questions : [],
      status: 'idle',
      error: undefined
  }
  </code></pre>
  <p>This goes into the <code>RootReducer</code></p>
  <p><code>const rootReducer = combineReducers({questions: questionReducer})</code></p>
  <p>And then this <code>RootReducer</code> is used to build the store:</p>
  <pre class="lang-js prettyprint-override"><code>const persistConfig = {
      key: 'root',
      storage: AsyncStorage
  }
  
  const persistedReducer = persistReducer(persistConfig, rootReducer);
  
  
  const mystore = createStore(
      persistedReducer,
      applyMiddleware(thunk)
  );```
  
  The comment Phry made pointed towards my state being an array of itself, but that doesn't seem to be the case to me. There's also no code I can find that modifies the state to be an array. I'll try and see if I can make a basic version of the project later that others could look at, but it might be a lot of work with my level of experience.
  
  </code></pre>