• Display a list of elements from our Redux store

Our state is properly updating but we are not displaying these updates to the user. We need a component that references the store and then uses the data from the store to reference the list of Todos.

The CreateTodo component is handling the creation side of things, so let's make a new component where we'll be getting todos from the store. We'll call this TodosContainer and connect it to Redux.

// ./src/features/todos/TodosContainer.js
import React from "react";

function TodoContainer() {
  return <div>TodoContainer</div>;
}

export default TodoContainer;

We aren't worried about dispatching actions here, only getting state from Redux, so we'll need to import useSelector and write a function to select the todos from our store state:

import React from "react";
import { useSelector } from "react-redux";

function TodoContainer() {
  const todos = useSelector((state) => state.todos.entities);

  console.log(todos);
  return <div>TodoContainer</div>;
}

export default TodoContainer;

We can confirm this is working by adding a log in out TodosContainer and then adding TodosContainer to our App component so it will be rendered.

Now that we have a way to get data from Redux, we can create a component to handle displaying our todos.

To start, we'll have each todo rendered as a list item. Inside the ./src/features/todos folder, create a file Todo.js. Inside it, write a component that returns an li displaying props:

// ./src/features/todos/Todo.js
import React from "react";

function Todo({ text }) {
  return <li>{text}</li>;
}

export default Todo;

Next, we need to map over our todo objects and convert them to Todo components in the TodosContainer component:

// ./src/features/todos/TodosContainer.js
import React from "react";
import { useSelector } from "react-redux";
import Todo from "./Todo";

function TodoContainer() {
  const todos = useSelector((state) => state.todos.entities);

  const todoList = todos.map((todo, index) => <Todo key={index} text={todo} />);
  return <ul>{todoList}</ul>;
}

export default TodoContainer;

Now our TodosContainer is mapping over the todos it received from Redux, passing the value of each todo into a child component, Todo. Todo in this case doesn't have any Redux related code, and is a regular, functional component.

Each time we submit a todo, we want to clear out the input. Remember that each time we submit a form, we call handleSubmit Inside that handleSubmit function, let's reset the component's state by changing our function to the following:

// ./src/features/todos/CreateTodo.js

function handleSubmit(event) {
  event.preventDefault();
  dispatch(todoAdded(text));
  setText("");
}

That's it! We've got a working app that takes in form data and displays it on a list.

We got our Todos component working simply by accessing the state from the store, and then iterating through the list in the Todos component.