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

Posted 2023-03-16

【中文标题】使用打字稿反应 redux combinereducer 时出错

【英文标题】：error at react redux combinereducer with typescript

【发布时间】：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")
);

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

【参考方案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