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

Question

我正在尝试在每次点击时进行自定义服务器端分页。但是当我尝试使用 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

标签： reactjsreduxreact-reduxreact-hooksredux-toolkit

Answer 1

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

您应该从以下位置解构该payload属性action：

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;
}