cannot update initalState in redux-toolkit with createAsyncThunk

Question

Im trying to set and update initialState in redux toolkit after fetch operation

pageSlice.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { deletePage, getPages, savePage, updatePage } from "../../services/page.service";
import { initialPage } from "../../components";

export const getUserPages = createAsyncThunk(
    "pages/getUserPages",
    async() => {
        const pages = await getPages();
        return pages
    }
)

export const saveUserPage = createAsyncThunk(
    "pages/saveUserPage",
    async(page) => {
        const savedPage = await savePage(page);
        return savedPage;
    }
)

export const pageSlice = createSlice({
    name: "pages",
    initialState: {
        pageStatus: "idle",
        pages: []
    },
    reducers: {},
    extraReducers: {
        [getUserPages.pending]: (state) => {
            state.pageStatus = "loading";
        },
        [getUserPages.fulfilled]: (state, action) => {
            state.pages = action.payload
            state.pageStatus = "pageLoaded"
        },
        [getUserPages.rejected]: (state) => {
            state.pageStatus = "error"
        },

        [saveUserPage.pending]: (state) => {
            state.pageStatus = "loading";
        },
        [saveUserPage.fulfilled]: (state, action) => {
            state.pages.push(action.payload)
            state.pageStatus = "pageLoaded"
        },
        [saveUserPage.rejected]: (state) => {
            state.pageStatus = "error"
        }
    }
})

export default pageSlice.reducer;

initialState: {
        pageStatus: "idle",
        pages: []
    },

Working on note app with redux-toolkit. pages array will contain array of objects.

In extraReducers

[saveUserPage.fulfilled]: (state, action) => {
       // console.log(state.pages) if empty( undefined ) else [{element}]
       state.pages.push(action.payload)
       state.pageStatus = "pageLoaded"
    }

if initailState pages array contain any single element [saveUserPage.fulfilled] work fine. but if array is empty then i get error Cannot read property 'push' of undefined at pages/saveUserPage/fulfilled

if console.log(state.pages) in s

What I'm doing wrong ?

Mahadev Bk · Answer 1 · 2021-07-04T11:02:29.593

Based on the Error message you have mentioned Cannot read property 'push' of undefined at pages/saveUserPage/fulfilled, state.pages is not an empty array, It is undefined. That is the reason you are seeing this error.

Array.push operation, all it expects the variable to be array i.e. [], It doesn't matter whether it is empty or it has items.

Please check the below code block or some other operation, whether it is assigning it as 'undefined' in the first place.

  [getUserPages.fulfilled]: (state, action) => {
        state.pages = action.payload
        state.pageStatus = "pageLoaded"
  },

Workaround solution:

[saveUserPage.fulfilled]: (state, action) => {
    if(state.pages === undefined){
         state.pages = [];
         if(action.payload && action.payload.length > 0){ / Make sure that payload is an array
              state.pages = action.payload; // 
         }
    }
    else{
        state.pages.push(action.payload);
    }

        state.pageStatus = "pageLoaded"
  },

Thanks for work around solution and I also found bug that cause this problem. — Vaishnav, Jul 05 '21 at 13:00
api was responding with nothing if no data available on database.. — Vaishnav, Jul 07 '21 at 03:19

cannot update initalState in redux-toolkit with createAsyncThunk

1 Answers1