TODO COMPONENT (PROVIDER AND USE SLECTOR)

 A COMPONENT FOLDER IS CREATED  IN THE src FOLDER IN WHICH A todo.jsx IS CREATED.

THE TODO COMPONENT IN THE FILE NEEDS ACCESS TO THE STORE INORDER TO PRINT THE LIST OF TASKS IN TODOS.

THIS ACCESS IS PROVIDED BY A COMPONENT CALLED PROVIDER.

PROVIDER

THE <Provider> COMPONENT MAKES THE REDUX STORE AVAILABLE TO ANY NESTED COMPONENTS THAT NEED TO ACCESS THE REDUX STORE.

IT IS IMPORTED IN APP.JS

import "./App.css";

import Todo from "./components/Todo";

import { Provider } from "react-redux";

import { store } from "./app/store";

function App() {

  return (

    <>

      <Provider store={store}>

        <Todo />

      </Provider>

    </>

  );

}

export default App;

WHATEVER THE COMPONENT DECLARED INSIDE <Provider> GETS ACCESS TO THE STORE.

STORE IS ALSO IMPORTED IN APP.JS, STORE IS PASSED AS A PROP.

TO ACCESS STORE IN TODO.JS WE USE  A HOOK CALLED USE SELECTOR.

USE SELECTOR

JUST LIKE WE USED useState IN REACT, HERE WE USE useSelector 

THE USE SELECTOR HOOKS ALLOW YOU TO EXTRACT DATA (OR) THE STATE FROM THE REDUX STORE USING A SELECTOR FUNCTION ( RETURNS THE DATA)

TODO.JSX

import { useSelector } from "react-redux";

 

export default function Todo() {

  const todos = useSelector((state) => state.todos);

  console.log(todos);

  return (

    <>

      <h3>Todos</h3>

      <ul>

        {todos.map((todo) => (

          <li key={todo.id}>{todo.task}</li>

        ))}

      </ul>

    </>

  );

}