使用打字稿反应 redux combinereducer 时出错
error at react redux combinereducer with typescript
我正在尝试通过制作待办事项列表来学习 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;
这里我在待办事项中遇到错误:部分
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")
);
如果你能帮我解决这个问题,我会很高兴
您的 TodoReducer
应始终 return TodoState
类型。
目前,您只在 reducer 中记录 state
和 action
。填满它应该可以正常工作。
虽然这不是您问题的直接答案,但您确实应该改用我们的官方 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
我正在尝试通过制作待办事项列表来学习 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;
这里我在待办事项中遇到错误:部分
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")
);
如果你能帮我解决这个问题,我会很高兴
您的 TodoReducer
应始终 return TodoState
类型。
目前,您只在 reducer 中记录 state
和 action
。填满它应该可以正常工作。
虽然这不是您问题的直接答案,但您确实应该改用我们的官方 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