Html Question posted in
Some basic documentation can be found here.

Html – Redux useSelector not logging state in console – Issue with habits state in React app

I am trying to learn redux code by implementing the below tutorial
I am not able to see the console log for habits in the browser
providing my code snippet below
can you let me know how to fix it

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;
Tags:

2

Answers


  1. 0

    This is because you haven’t included the HabbitList component in the App.

    Make the following changes to your app.tsx;

    First import the component.

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

    And then include that component in the <App> just below the <AddHabitForm />

      <AddHabitForm />
  <HabitList/>
    Login or Signup to reply.
  2. 0

    Insert the HabitList into the App computer.
    Also, currently, the function inside the useSelector doesn’t return anything. You should remove those parentheses.
    Here’s the updated the code

    habits-list.tsx

    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;

    App.tsx

    import "./styles.css";
import { Provider } from "react-redux";
import store from "./store/store";
import { Container, Typography } from "@mui/material";
import AddHabitForm from "./components/add-habit-form";
import HabitList from "./components/habits-list";

export default function App() {
  return (
    <Provider store={store}>
      <Container maxWidth="md">
        <Typography component="h1" variant="h2" align="center">
          Habit Tracker
          <AddHabitForm />
          <HabitList/> 
        </Typography>
      </Container>
    </Provider>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search