Fix bug in docs for createAsyncThunk example (#417)

fetchUserById payloadCreator should fetch when in pending (not idle) state

Author: dlwalsh

docs/api/createAsyncThunk.md

@@ -325,9 +325,9 @@ import { userAPI } from './userAPI'
 
 const fetchUserById = createAsyncThunk(
   'users/fetchByIdStatus',
-  async (userId, { getState }) => {
-    const { loading } = getState().users
-    if (loading !== 'idle') {
+  async (userId, { getState, requestId }) => {
+    const { currentRequestId, loading } = getState().users
+    if (loading !== 'pending' || requestId !== currentRequestId) {
       return
     }
     const response = await userAPI.fetchById(userId)
@@ -340,25 +340,31 @@ const usersSlice = createSlice({
   initialState: {
     entities: [],
     loading: 'idle',
+    currentRequestId: undefined,
     error: null
   },
   reducers: {},
   extraReducers: {
     [fetchUserById.pending]: (state, action) => {
       if (state.loading === 'idle') {
         state.loading = 'pending'
+        state.currentRequestId = action.meta.requestId
       }
     },
     [fetchUserById.fulfilled]: (state, action) => {
-      if (state.loading === 'pending') {
+      const { requestId } = action.meta
+      if (state.loading === 'pending' && state.currentRequestId === requestId) {
         state.loading = 'idle'
-        state.push(action.payload)
+        state.entities.push(action.payload)
+        state.currentRequestId = undefined
       }
     },
     [fetchUserById.rejected]: (state, action) => {
-      if (state.loading === 'pending') {
+      const { requestId } = action.meta
+      if (state.loading === 'pending' && state.currentRequestId === requestId) {
         state.loading = 'idle'
         state.error = action.error
+        state.currentRequestId = undefined
       }
     }
   }