Redux useSelector 未在控制台中记录状态 - React 应用程序中的习惯状态问题

Question

我正在尝试通过实施以下教程来学习 redux 代码 我无法在浏览器中查看习惯的控制台日志 下面提供我的代码片段 你能让我知道如何修复它吗

https://www.youtube.com/watch?v=-ovliZG617g&t=1310s

https://codesandbox.io/p/sandbox/yxtwjg?file=%2Fsrc%2Fcomponents%2Fhabits-list.tsx%3A9%2C6

import React from "react";
import { useSelector } from "react-redux";
import { RootState } from "../store/store";
import { Box } from "@mui/material";

const HabitList: React.FC = () => {
  const { habits } = useSelector((state: RootState) => {
    state.habits;
  });
  return <Box>{console.log("habits", habits)}</Box>;
};

export default HabitList;

Answer 1

这是因为你还没有在App中包含HabbitList组件。

对您的 App.tsx 进行以下更改 首先导入组件。

import HabitList from "./components/habits-list";

然后将该组件包含在

的正下方

  <AddHabitForm />
  <HabitList/>