Действие отправляется успешно, полезная нагрузка достигает редуктора, но состояние остается тем же. Реагировать + Redux

Question

Я сделал действие, чтобы установить мою текущую страницу для разбивки на страницы в моей таблице. Действие отправляется успешно, и правильная полезная нагрузка достигает редуктора, как видно на инструментах dev-редуктора, но состояние не меняется. Я понятия не имею, почему это происходит. Все мои действия работают нормально, но на этот раз я столкнулся с этой проблемой. Это моё действие ->

import { SET_CURRENT_PAGE } from "./types";

export const setCurrentPage = page => {
  return {
    type: SET_CURRENT_PAGE,
    page
  };
};

Это моё редуктор

import { SET_CURRENT_PAGE } from "../actions/types";

const initialState = {
  currentPage: 1
};

export default (state = initialState, action) => {
  switch (action.payload) {
    case SET_CURRENT_PAGE: {
      return {
           ...state,
           currentPage:action.page
       };
    }
    default:
      return state;
  }
};

Я вызываю это действие в компоненте моей таблицы. Действие отправлено успешно оттуда. Я не знаю, почему государство не обновляется. Redux-dev tool

Answer 1

Попробуйте добавить полезную нагрузку в ваше действие, как показано ниже

import { SET_CURRENT_PAGE } from "./types";

export const setCurrentPage = page => {
  return {
    type: SET_CURRENT_PAGE,
    payload: page
  };
};

Используйте тип для регистра переключателя и полезную нагрузку для установки состояния, например

import { SET_CURRENT_PAGE } from "../actions/types";
const initialState = {
  currentPage: 1
};
export default (state = initialState, action) => {
  switch (action.type) {
    case SET_CURRENT_PAGE: {
      return {
           ...state,
           currentPage:action.payload
       };
    }
    default:
      return state;
  }
};

Answer 2

В вашем коде есть небольшая ошибка, замените action.payload на action.type в операторе switch.

Попробуйте это.

import { SET_CURRENT_PAGE } from "../actions/types";
const initialState = {
  currentPage: 1
};
export default (state = initialState, action) => {
  switch (action.type) {
    case SET_CURRENT_PAGE: {
      return {
           ...state,
           currentPage:action.page
       };
    }
    default:
      return state;
  }
};