經過一個demo瞭解Redux

TodoList小demo

效果展現

項目地址

回到頂部

(單向)數據流

數據流是咱們的行爲與響應的抽象；使用數據流能幫咱們明確了行爲對應的響應，這和react的狀態可預測的思想是不謀而合的。

常見的數據流框架有Flux/reFlux/Redux。相比其它數據流框架，Redux輕量(壓縮後只有2K),並且在一個react項目中，Redux維護了單一的狀態樹。

下面咱們來具體看看爲何要使用數據流

不僅是前端，不少系統開發的時候聽從的都是MVC分離，也就是數據放在Model裏面，View來控制顯示，Controler作總體的管理。可是隨着系統的龐大，它會產生一系列問題。好比舉個例子，咱們上網shopping，提交訂單，那麼用戶的帳號，優惠信息，物流信息，庫存等等的Model都會發生更新變化，而後View上的顯示也會隨之變化，反過來，View的有些變化也會對Model產生影響，這樣就使用戶下了一個訂單之後界面會變得什麼樣變得不可預測。

因此在React出現的同時Facebook也搞出了一個Flux數據流(React是純V層框架，須要數據流進行支撐)，它的思想以下:

它認爲用戶有各類各樣的Action,而後全部的Action由一個統一的Dispacher分發到若干個Store裏去，這個Store保存着數據也保存着頁面的狀態，根據數據和頁面的狀態，一個store只能向視圖層傳遞信息，而不容許視圖層再返回來做用到Store上，而後視圖就發生更新，而後再由用戶傳入新的操做。這樣子咱們就能預測到Action做用到Store上時，View發生什麼變化。

那Redux是Flux的一種實現方法，可是也有些許不同，它的思想以下

                       

當頁面渲染完，UI就出現了，而後用戶觸發UI上的Action，而後Action被送到Reducer這個方法裏去，而後Reducer更新了Store，Store裏包含react開發的State，最後State決定UI層的展示。這就是Redux的一個完整過程。

react-redux安裝:

npm install react-redux redux

redux自己就是一個工具流，而react-redux則是對redux的綁定。相似的還有ng2-redux、backbone-redux等

回到頂部

項目結構

四個重要的文件夾：

-- actions：行爲

-- components：組件

-- container：組件

-- reducer：Store裏分發Action的方法

- index.html：模板文件

- server.js

- webpack

下面對各個部分進行舉例（一個簡單的待辦項小demo）：

action:(1.是行爲的抽象；2.是普通JS對象；3.通常由方法生成；4.必須有一個type)

const addTodo = (text) = > {
  return {
    type: 'ADD_TODO',  //必需要有type
    id: nextTodoId++,
    text
  }
} 

reducer:(1.是響應的抽象；2.純方法（非存方法是指好比依賴當前的時間）)

/* 傳入舊的state和做用的action返回一個新state */
const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
       return {
          id: action.id,
          text: action.text,
          completed: false    // 剛傳入的待辦項未完成
       }
     case 'TOGGLE_TODO':
       if (state.id !== action.id) {  
         return state
       }      
       return Object.assign({}, state, {  // 把state和completed合併成一個對象返回
          completed: !state.completed
       })
     default: 
        return state
  }
}    

store:(1.action做用於store；2.reducer根據store響應；3.對於redux來講，store是惟一的；4.store包括了完整的state；5.state徹底可預測)

import { createStore } from 'redux'
import todoApp from './reducers'

let store = createStore(todoApp)

打印store：

組件：