简介

上一篇中我们已经将大部分的内容与功能都建立完成，最后要建立的便是给使用者选择要看到那些Todo的选项按钮，显示筛选分别为 :

全部Todo已经完成的Todo (completed : true)尚未完成的Todo (completed : false)

筛选Todo的流程

当Link.js中的超连结被点击，会进入由FilterLink透过connect传递的callback function(mapDispatchToProps())。mapDispatchToProps()会将筛选的action dispatch到Reducer进行处理，处理完后return一个新的State。当return新的state后，由于state的改变便会呼叫到整个专案的mapStateToProps，虽然会呼叫整个专案的mapStateToProps，但只有visibleTodoList的mapStateToProps符合。visibleTodoList中的mapStateToProps将Todos筛选后return结果给TodoList进行UI选染。

流程图 :

FilterLink.js

import { connect } from "react-redux";import { setVisibilityFilter } from "../Store/Action/Action";import Link from "../Presentational Component/Link";//当State更新后自动调用const mapStateToProps = (state, ownProps) => {    //ownProps : 传递给FilterLink组件的元素，包含props与childran(标籤中的元素)    return {      active: ownProps.filter === state.visibilityFilter    }}//将onClick传递给Presentational Components作为callbackconst mapDispatchToProps = (dispatch, ownProps) => {    return {      onClick: () => {          console.log(ownProps.filter)        dispatch(setVisibilityFilter(ownProps.filter))      }    }}//将判断filter的结果与callback藉由connect传递给Linkconst FilterLink = connect(    mapStateToProps,    mapDispatchToProps)(Link)  export default FilterLink

Link.js

import React from "react";const Link = (props) => {    if(props.active){        return(            <span>{props.children}</span>        )    }    return(        <a             href="#"            onClick={e=>{                e.preventDefault();                props.onClick()            }}        >            {props.children}        </a>    )};export default Link;

Footer.js

import React from "react";import FilterLink  from "../Container Component/FilterLink";const Footer = (props) => (    <p>      Show:      {" "}      <FilterLink filter="SHOW_ALL">        {/* childran */}        All      </FilterLink>      {", "}      <FilterLink filter="SHOW_ACTIVE">        Active      </FilterLink>      {", "}      <FilterLink filter="SHOW_COMPLETED">        Completed      </FilterLink>    </p>)  export default Footer

结论

节由这个练习可以更加了解Redux处理数据的方法，将数据交给Redux进行处理后再将处理完的数据传递给Presentational Component进行UI渲染，不需要再考虑组件之间state的传递、提升state的问题，在更大型的专案中更能够体现使用Redux的好处。

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