在React中使用Redux數據流（講解比較清晰，差代碼）

課程地址：https://www.imooc.com/learn/744

node-引擎

webpack-構建

1、瞭解數據流

this.props-父子組件間傳遞

this.state組件當前狀態

2、安裝框架及介紹

兩個包安裝（redux自己就是一個獨立的框架）

四個重要的文件夾

action-行爲

components，container存放組件

reducer-分發行爲

index.html-模板，server.js-構建跑項目，webpack-打包項目

純方法：傳入什麼，可直接傳出不依賴其餘，好比定時器什麼

store由redux裏的creatStore生成

3、官方demo

1.結構和相關配置介紹

啓動調試

依賴版本

啓動框架實例

組織文件

入口

打包

express：node下的最有名的一個服務器，像php，相似python下的django，java等web服務器。能夠把一些數據動態插入在模板中。

比較簡單

通常是在內存裏打包

渲染進去的獎被轉化爲一個js標籤，打包成一個文件

入口-熱加載，運行文件

處理js

引入不須要加js了

把高級的ES6,ES5或者語法糖轉化成ES3來實現

這個目錄不須要轉義

目錄下運行，安裝node_moudles

2.項目實現

（1）action添加用戶行爲

在action目錄下新建index.js

A.添加待辦項的抽象動做：

給一個變量id，不用text是爲了區分兩個相同待辦項不一樣時做用行爲

B.設置可見

C.點擊觸發待辦項行爲

三種用戶行爲被描述完畢

（2）reducer對用戶行爲的相應

（添加和觸發行爲會影響）

描述todo添加待辦項狀態

Object.assign（）是ES6新語法，把state和後面{}的對象進行合併，而後賦值在前面空{}這個對象裏面

其實是用不到的，可是爲了完整也寫上

待辦項列表

傳入的state和輸出的state都是個數組的概念

處理完待辦項和待辦項列表

在reducers下新建visibilityFillter.js，存放篩選器

狀態樹應在開發系統前就想好

ES6：給state一個初始值，SHOW_ALL

打開後就會有選中狀態

在todo.js裏提供一個export方法

在reducer下新建index.js，而且import引入相關方法

拆出方法，給輸出

項目中系統的響應寫完畢

（3）組件（稍微難，有es6語法和一些理解）

在components下新建App.js，存放三個組件

不一樣位置的區別，爲了更好複用

在container下新建AddTodo.js文件，引入react-redux的connect方法

connect-高級寫法

查看源代碼。

通常普通方法會返回一個值，可是這個connect方法返回一個函數

connect方法寫的挺好，有時間看看，只有300多行

增長dispatch進行分發

傳入的text由input寫入，把ref進行綁定

添加AddTodo的button

把顯示和邏輯混合在container裏

下面，把顯示和邏輯分離，寫一個純粹的container組件：

在container下新建VisibleTodoList.js，引入相關

一個react組件是由兩類props組成，一類是由他的state進行轉換（點擊按鈕，他的狀態會發生變化，props屬性發生變化），另外一類是由dispatch引起變化（一類行爲要被分發的時候）

state影響

傳入一個由component實現的組件

由dispatch影響，用戶行爲直接分發，定義在toggleTodo上，須要傳入一個id

接下來寫onTodoClick方法

在component下新建Todolist,js文件，假設Todo組件寫好了。這裏只關乎顯示和佈局，樣式，和邏輯無關

在component下新建Todo.js

方式2寫完，完成分離

分析：上層邏輯組件，下層顯示組件

在component下新建footer.js組件-純顯示組件

在container下新建FilterLink.js文件。

event怎麼轉化爲action就是dispatch要實現的功能

在component下新建Link.js文件

4.入口文件包裝

creatStore方法是有redux提供的，把咱們全部的reducer經過響應來推斷出store是什麼樣子的，用Provider包裝起來，最後用react的render方法渲染在節點上，完成開發

 

4、擴展知識

左邊es6寫法，右邊react.creatClass

 參考文檔：

擴展閱讀：https://github.com/jasonslyvia/a-cartoon-intro-to-redux-cn