Redux Toolkit reducer无法接收action.payload 服务端分页场景问题求助

问题原因 #

pageByNumber reducer的入参解构语法使用错误：
createSlice定义的reducer函数，第二个入参本身就是完整的action对象（包含type、payload等属性）。你写的(state,{action}) => {}相当于从action对象中尝试解构名为action的属性，该属性不存在，所以得到的action是undefined，读取action.payload自然会报错。

修复方案 #

第一步：修正reducer的参数写法 #

你可以选择以下任意一种写法修正参数：
写法1：直接接收完整action对象

pageByNumber: (state, action) => {
  state.page = action.payload.page
}

写法2：直接从入参解构payload

pageByNumber: (state, { payload }) => {
  state.page = payload.page
}

注意：你dispatch时传入的是pageByNumber({page:page})，所以payload是{page: 目标页码}的对象，需要取payload.page赋值给state.page，不要直接把payload赋值给state.page。

可选优化 #

如果你希望直接传页码作为payload，可以调整dispatch的写法，减少层级：

// 组件内dispatch写法
dispatch(pageByNumber(page))
// 对应的reducer写法
pageByNumber: (state, { payload }) => {
  state.page = payload
}

内容的提问来源于stack exchange，提问作者shazim ali