I'm trying to learn redux by making a to-do list
but i am getting an error and i couldn't solve this problem
my types
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;
here I am getting error in todo: part
index.ts of my file
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")
);
I will be very glad if you can help me how to solve this problem
Your TodoReducer
should return TodoState
types at all times.
Currently, you are only logging state
and action
inside your reducer. Fill it up and it should work fine.