Question

我做了一个动作，将当前页面设置为在表中进行分页。如redux dev工具所示，该动作已成功调度，正确的有效负载到达了reducer，但是状态没有改变。我不知道为什么会这样。我所有的动作都正常，但是这次我正面临这个问题。这是我的动作->

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

您的代码有一个小错误，请在switch语句中将action.payload更改为action.type。

尝试一下。

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

Answer 2

尝试在如下操作中添加有效载荷

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

动作成功调度，有效负载到达减速器，但状态保持不变。 React + Redux

2 个答案: