Блог

я пытаюсь настроить разбиение на страницы на стороне сервера при каждом щелчке. но когда я пытаюсь обновить состояние с помощью редуктора, я получаю эту ошибку

ФАЙЛ КОМПОНЕНТА, из которого я отправляю этот редуктор

  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
 

Объект действия является вторым аргументом, переданным редуктору. Там нет 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;
}