TypeError: Cannot read properties of undefined (reading 'todos') - reactjs

Question

When I try to run this code it gives me this error:
TypeError: Cannot read properties of undefined (reading 'todos')
how to fix it
I wanted to make a todo list that will work after the user registers, but todo does not work after registration
My code:
HomePage.js
const HomePage = () => {
const dispatch = useDispatch();
const { isAuth, email } = useAuth();
return isAuth ? (
<div>
<TodoForm />
<button onClick={() => dispatch(removeUser())}>
Log out from {email}
</button>
</div>
) : (
<Redirect to="/login" />
);
};
TodoForm.js
const TodoForm = () => {
const todos = useSelector((state) => state.todo.todos)
// const todos = useSelector((state) => state.todo.todos);
const dispatch = useDispatch();
const [todoValue, setTodoValue] = useState("");
const addTodoHandler = (e) => {
e.preventDefault();
const todo = {
id: v4(),
text: todoValue,
completed: false,
};
dispatch(addTodo(todo));
setTodoValue("");
};
const handleChange = (e) => {
setTodoValue(e.target.value);
};
console.log(todos);
return (
<>
<form onSubmit={addTodoHandler}>
<input
type="text"
value={todoValue}
onChange={handleChange}
placeholder="Add task"
/>
<button type="submit">Submit</button>
</form>
{todos.map((todo) => (
<TodoList key={todo.id} todo={todo} />
))}
</>
);
};
todoSlice.js
const initialState = {
todos: [],
};
export const todoSlice = createSlice({
name: "todos",
initialState,
reducers: {
addTodo: (state, action) => {
state.todos.push(action.payload);
},
removeTodo: (state, action) => {
state.todos = state.todos.filter((todo) => todo.id !== action.payload);
},
completedTodo: (state, action) => {
const toggleTodo = state.todos.find((todo) => todo.id === action.payload);
toggleTodo.completed = !toggleTodo.completed;
},
},
});
store
reducer: {
todo: todoSlice,
user: userReducer,
},
});
help me fix this, I will be very grateful

Answer 1

slicename is todos not todo
const todos = useSelector((state) => state.todos.todos)