title: createAsyncThunk and writing reducer login with redux-toolkit
body: <p>I was reading <code>createAsyncThunk</code> documentation, and felt kind of confused with the flow. This is from the docs:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
  import { userAPI } from './userAPI'
  
  // First, create the thunk
  const fetchUserById = createAsyncThunk(
    'users/fetchByIdStatus',
    async (userId, thunkAPI) =&gt; {
      const response = await userAPI.fetchById(userId)
      return response.data
    }
  )
  
  // Then, handle actions in your reducers:
  const usersSlice = createSlice({
    name: 'users',
    initialState: { entities: [], loading: 'idle' },
    reducers: {
      // standard reducer logic, with auto-generated action types per reducer
    },
    extraReducers: {
      // Add reducers for additional action types here, and handle loading state as needed
      [fetchUserById.fulfilled]: (state, action) =&gt; {
        // Add user to the state array
        state.entities.push(action.payload)
      }
    }
  })
  
  // Later, dispatch the thunk as needed in the app
  dispatch(fetchUserById(123))
  </code></pre>
  
  <p><br></p>
  
  <p>What do I have to write in the <code>reducers</code> and <code>extraReducers</code>? Standard reducer logic?</p>
  
  <p>I have this <a href="https://codesandbox.io/s/zealous-montalcini-oks4m?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="noreferrer">CodeSandbox</a> that I implemented the old redux way. Now, need to implement <code>redux-toolkit</code> in it.</p>