简介

虽然Redux与React没有关係，可以用Redux搭配Angular,JQuery甚至原生JavaScript，不过由于React是单向资料流的形式，若要将两个平行的Component(不具有父子层关係)互相传递State非常麻烦，需要不断的将state提升到共同的父层，而Redux就很好的能够处理这个麻烦的问题，Redux可以统一管理State，将State拉升到大家共同都能够继承到的地方，并且开发时能将UI与资料处理分开，UI交给React Component处理，资料处理就拉到Redux进行。

安装React Redux

yarn add redux yarn add react-redux  

Presentational 和 Container Component

在开发React-Redux的专案时，分离Presentational Component与Container Component是非常重要的，可以参考Presentational and Container Components这篇文章，他将这个概念介绍得很清楚，简单来说Presentational组件负责UI的渲染，他所接收到的资料都来自于props(组件内没有state)，而Container组件负责数据的处理并将处理完的数据向下传递给Presentational组件并选染UI。

...|Presentational Components | Container Component
------------- | -------------
用途|选染UI | 处理数据(更新State)
使用Redux | 否|是
获取资料|透过props|绑定Redux State
改变资料|从props呼叫callback|dispatch(action)

设计Component

在介绍完Redux之后，里用Redux官网的TodoList範例，实际练习一下该如何将Redux与React结合。

Presentational Component

记得Presentatiional Component是负责选染UI的组件，下面整理了所需要的Presentational Component与他们所需要的props。

TodoList : 显示Todos的清单。todos : Array中包含了各个todo内容{id,text,completed}onTodoClick(id:number) : 当todo被点击时触发的callback，功能是将该todo变更completed状态Todo : 单一Todo项目。Text : string, 显示个Todo事项completed : boolean, 该todo项目是否完成onClick() : function, 当todo被点击时触发的callback，功能是将该todo变更completed状态Link : 连结Footer，内涵的callback function将改变使用者观看Todos位置。onClick() : function, 当一个Link被点击时触发，功能是将改变使用者可见的Todos位置Footer : 让使用者改变现在可见Todos的位置，连接着Link进行改变。App : 负责render所有组件的root Component。

Container Component

Container Conponent是负责处理数据并且将Presentational 与 Redux连结起来。

VisibleTodoList : 根据目前筛选的Filter选择显示哪些Todos，负责将TodoList与Redux绑定。FooterLink : 拿到目前筛选的Filter，负责将Link与Redux绑定filter : string, 筛选的Filter

其他Component

有时候也些Component很难分辨是presentational component 还是 container component，比如有些form或是function会需要同时渲染UI又得处理数据，虽然在大型的专案中还是会将这种类型的Component拆成两种组件，不过由于我们这个练习相对单纯，所以目前保持混用。

AddTodo : 包含input与button负责新增Todo到TodosList中。

参考资料 :
从Redux 的作者学习它
Presentational and Container Components
React 与他的快乐小伙伴 Redux -基础教学