Redux Toolkit+TypeScript中Reducer定义报错问题咨询

问题原因 #

你的nextPerson和prevPerson两个reducer返回了单独的number值，但Redux Toolkit的CaseReducer有明确的类型约束：

• 要么通过Immer直接修改传入的state对象（无需返回值，或返回void）
• 要么返回一个完整的、符合ReviewStateProps类型的新状态对象

当前返回的number既不是void，也不是完整的状态对象，因此TypeScript抛出类型不匹配的错误。

解决方法 #

方法1：直接修改state（推荐，利用Immer可变更新） #

Redux Toolkit内置Immer，允许你直接修改state的属性，Immer会自动将其转换为不可变更新。修改后的reducer无需返回值，直接更新state.index即可：

import { createSlice } from "@reduxjs/toolkit";
import { data } from "../data/Reviews";

interface ReviewStateProps {
  index: number;
}

const initialState: ReviewStateProps = { index: 0 };

const reviewSlice = createSlice({
  name: "review",
  initialState,
  reducers: {
    nextPerson: (state) => {
      let newIndex = state.index + 1;
      if (newIndex > data.length - 1) {
        state.index = 0;
      } else if (newIndex < 0) {
        state.index = data.length - 1;
      } else {
        state.index = newIndex;
      }
    },
    prevPerson: (state) => {
      let newIndex = state.index - 1;
      if (newIndex < 0) {
        state.index = data.length - 1;
      } else if (newIndex > data.length - 1) {
        state.index = 0;
      } else {
        state.index = newIndex;
      }
    },
  },
});

export const reviewActions = reviewSlice.actions;

export default reviewSlice.reducer;

逻辑优化版：用取模运算简化边界处理：

nextPerson: (state) => {
  state.index = (state.index + 1) % data.length;
},
prevPerson: (state) => {
  state.index = (state.index - 1 + data.length) % data.length;
}

方法2：返回完整的新状态对象 #

若不想直接修改state，可返回一个符合ReviewStateProps类型的新对象：

import { createSlice } from "@reduxjs/toolkit";
import { data } from "../data/Reviews";

interface ReviewStateProps {
  index: number;
}

const initialState: ReviewStateProps = { index: 0 };

const reviewSlice = createSlice({
  name: "review",
  initialState,
  reducers: {
    nextPerson: (state) => {
      let newIndex = state.index + 1;
      if (newIndex > data.length - 1) {
        newIndex = 0;
      } else if (newIndex < 0) {
        newIndex = data.length - 1;
      }
      return { ...state, index: newIndex };
    },
    prevPerson: (state) => {
      let newIndex = state.index - 1;
      if (newIndex < 0) {
        newIndex = data.length - 1;
      } else if (newIndex > data.length - 1) {
        newIndex = 0;
      }
      return { ...state, index: newIndex };
    },
  },
});

export const reviewActions = reviewSlice.actions;

export default reviewSlice.reducer;

内容的提问来源于stack exchange，提问作者Thecountofs