Question

我正在尝试在获取操作后设置和更新 redux 工具包中的 initialState

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: []
    },

使用 redux-toolkit 开发笔记应用程序。 pages 数组将包含对象数组。

在extraReducers

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

如果 initailState pages 数组包含任何单个元素 [saveUserPage.fulfilled] 工作正常。但如果数组为空，那么我会收到错误 Cannot read property 'push' of undefined at pages/saveUserPage/fulfilled

if console.log(state.pages) in s

我做错了什么？

Answer 1

根据您提到的错误消息无法读取页面/保存用户页面/已完成的未定义属性“推送”，state.pages 不是空数组，未定义强>。这就是您看到此错误的原因。

Array.push 操作，它所期望的变量都是数组即[]，不管是空的还是有项目的。

请检查下面的代码块或其他一些操作，是否首先将其分配为“未定义”。

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

变通解决方案：

[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"
  },

无法使用 createAsyncThunk 更新 redux-toolkit 中的initalState

1 个答案: