1. 程式人生 > >一個簡單的例子讓你瞭解React-Redux

一個簡單的例子讓你瞭解React-Redux

1. (單向)資料流

資料流是我們的行為與響應的抽象;使用資料流能幫我們明確了行為對應的響應,這和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的一個完整過程。

2. React 的一些簡單回顧

這裡寫圖片描述

3.react-redux 介紹

這裡寫圖片描述

react-redux安裝:

npm install react-redux redux

redux本身就是一個工具流,而react-redux則是對redux的繫結。類似的還有ng2-redux、backbone-redux等

4. 直接開擼程式碼

專案結構

四個重要的資料夾:

– 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.純方法(非存方法是指比如依賴當前的時間))
通過reducer,可以把使用者的actions都和states結合起來,形成新的state 在返回去,在container元件中得到新的state

這裡寫圖片描述

/* 傳入舊的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:(reducer和state的集合)

  • 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:

這裡寫圖片描述

元件:

這裡寫圖片描述

redux 並不知道 component元件的存在,而只知道container元件的存在,所以資料流從redux流入 container元件,container在通過 props傳參的形式,傳入component元件。

一般來說componet元件是如何顯示,比較容易複用,而container卻是和我們的業務聯絡比較緊密,不容易複用。

總結

  • 很多中介軟體 redux-thunk傳送ajax, redux-gen生成器,react-route-redux路由,react-redux-form 表單;

  • function 優於ES6 Class 的寫法,優於React.createClass的寫法;function的箭頭函式就不用return了,這樣就避免了寫render方法,搞笑快捷;
    這裡寫圖片描述

  • mapStateToProps和mapDispatchToProps可以自定義,只要和connect高階函式名保持一致就行了。

  • 熟悉陣列方法 map, filter,reduce方法