简介

上一篇中我们已经将AddTodo建立好并且确认Reducer会产生新的state，接下来要建立将Todo物件显示在UI的组件，由于TodoList只负责渲染画面并且接收到的数据均是来自props，所以它是属于Presentational Component，而VisibleTodoList是要进行筛选Filter的逻辑处理，所以归类为Container Component。

VisibleTodoList.js

藉由mapDispatchToProps会在state发生改变(新增新的todo物件)时会自动调用，将新增的todos Array带入getVisibleTodos function中进行Filter的逻辑判断，以Filter的型态决定显示那些Todo物件，而筛选过后的todos会透过connect传递给TodoList进行UI选染。

import { connect } from "react-redux";import { toggleTodo } from "../Store/Action/Action";import TodoList from "../Presentational Component/TodoList";const getVisibleTodos = (todos, filter) => {    switch (filter) {      case 'SHOW_ALL':        return todos      case 'SHOW_COMPLETED':        return todos.filter(t => t.completed)      case 'SHOW_ACTIVE':        return todos.filter(t => !t.completed)    default:            break;    }};//当State更新后自动调用const mapStateToProps = (state) => {    /*将State中的todo传入getVisibleTodos function进行筛选Filter逻辑判断，    return判断结果给todos中*/    return {      todos: getVisibleTodos(state.todos, state.visibilityFilter)    }};//将onTodoClick传递给Presentational Components作为callbackconst mapDispatchToProps = (dispatch) => {    return {      onTodoClick: (id) => {        dispatch(toggleTodo(id))      }    }}  //筛选过后的todos与callback藉由connect传递给TodoListconst VisibleTodoList = connect(    mapStateToProps,    mapDispatchToProps)(TodoList)  export default VisibleTodoList

TodoList.js

从VisibleTodoList进行逻辑判断后，将筛选玩的Todos与callback function藉由connect传递给TodoList，TodoList再将收到的props进行UI选染。

import React from "react";import Todo from "./Todo";const TodoList = (props) => {    console.log(props) //藉由console查看传递到TodoList的props内容    return(        <ul>            {                props.todos.map(todo =>                     <Todo                         key={todo.id}                        {...todo}                        onClick={()=> props.onTodoClick(todo.id)}                    />                )            }        </ul>    )};export default TodoList;

TodoList的props是筛选过后的Todos与onClick callback function

Todo.js

import React from "react";const Todo = (props) => {    return(        <li            onClick={props.onClick}            style={{                textDecoration: props.completed ? 'line-through' : 'none'            }}        >            {props.text}        </li>    )};export default Todo;

参考资料 :
从Redux 的作者学习它