Redux 工具包减速器未接收（ {action.payload} ）答案

【问题标题】：Redux toolkit reducer not receiving ( {action.payload} )Redux 工具包减速器未接收（ {action.payload} ）
【发布时间】：2021-11-21 23:03:58
【问题描述】：

我正在尝试在每次点击时进行自定义服务器端分页。但是当我尝试使用 reducer 更新状态时，我得到了这个错误

我从哪里分派这个减速器的组件文件

 function changePageByNumber(page){
      dispatch(pageByNumber({page:page})) //dispatching reducer
      dispatch(fetchUsers({page:page}));
    }

切片文件

const usersSlice = createSlice({
name:'users',
initialState: usersAdapter.getInitialState( { loading: false, page: 1, total_pages: null } ),
reducers:{
  pageByNumber: (state,{action}) => {
    state.page = action.payload // why action not getting payload
  }
},
extraReducers: {
    [fetchUsers.pending]: (state) => {
      state.loading = true
    },
    [fetchUsers.fulfilled]: (state, { payload}) => {
      state.loading = false,
      state.total_records = payload.total,
      state.per_page = payload.per_page,
      state.total_pages = payload.total/payload.per_page,
      usersAdapter.setAll(state, payload.data)      
    },
    [fetchUsers.rejected]: (state) => {
      state.loading = false
    }
  },
});

export const usersSelectors = usersAdapter.getSelectors(
  (state) => state.users,
  )

export const {pageByNumber} = usersSlice.actions
export default usersSlice.reducer

【问题讨论】：

标签： reactjs redux react-redux react-hooks redux-toolkit

【解决方案1】：

动作对象是传递给reducer的第二个参数。没有action.action，因此尝试访问action.action.payload 会引发错误。

您应该从action 解构payload 属性：

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

或

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

基于已调度的操作dispatch(pageByNumber({ page: page })) 我还要说您需要访问操作负载的page 属性：

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

【讨论】：