使用打字稿反应 redux combinereducer 时出错答案

【问题标题】：error at react redux combinereducer with typescript使用打字稿反应 redux combinereducer 时出错
【发布时间】：2021-12-07 07:39:47
【问题描述】：

我正在尝试通过制作待办事项列表来学习 redux

但我遇到了一个错误，我无法解决这个问题

我的类型

  export interface TodoType {
  text: string;
  id: number;
}
export interface TodoState {
  todoList: TodoType[];
}

interface ADD_TODO {
  type: "ADD_TODO";
  payload: TodoType;
}
interface REMOVE_TODO {
  type: "REMOVE_TODO";
  payload: TodoType;
}
export interface AppState {
  todo: TodoState;
}
export type TodoAction = ADD_TODO | REMOVE_TODO;

TodoReducer.ts ;

import { TodoState, TodoAction } from "global";

const INITIAL_STATE: TodoState = {
  todoList: [],
};

export const TodoReducer = (state = INITIAL_STATE, action: TodoAction) => {
  console.log(state, action);
};

index.ts

import { TodoState } from "global";
import { combineReducers } from "redux";
import { TodoReducer } from "./reducers/TodoReducer";

export interface AppState {
  todo: TodoState;
}

const rootReducer = combineReducers<AppState>({
  todo: TodoReducer,
});
export default rootReducer;

我在 todo 中遇到错误：part

我的文件的index.ts

import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";

import App from "./App";
import rootReducer from "./store";

const store = createStore(rootReducer, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,

  document.getElementById("root")
);

如果你能帮我解决这个问题，我会很高兴

【问题讨论】：

标签： reactjs typescript redux dispatch reducers

【解决方案1】：

您的TodoReducer 应始终返回TodoState 类型。

目前，您只在减速器中记录 state 和 action。填满它应该可以正常工作。

【讨论】：

【解决方案2】：

虽然它不能直接回答您的问题，但您确实应该改用我们的官方 Redux Toolkit 包，这是编写 Redux 逻辑的标准方法。它将简化您的代码，让您消除所有这些额外的操作和类型定义，并且与 TS 配合得很好：

https://redux.js.org/usage/usage-with-typescript

例子：

import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import type { RootState } from '../../app/store'

// Define a type for the slice state
interface CounterState {
  value: number
}

// Define the initial state using that type
const initialState: CounterState = {
  value: 0
}

export const counterSlice = createSlice({
  name: 'counter',
  // `createSlice` will infer the state type from the `initialState` argument
  initialState,
  reducers: {
    increment: state => {
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
    // Use the PayloadAction type to declare the contents of `action.payload`
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload
    }
  }
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions

// Other code such as selectors can use the imported `RootState` type
export const selectCount = (state: RootState) => state.counter.value

export default counterSlice.reducer

【讨论】：