Redux基礎


  1. Redux 是一個狀態容器
    Redux 就像是作者自己的介紹,它不會為你提供任何的東西,它不會告訴你如何做路由,它只專注於應用程序狀態,是一個 JavasSript 的狀態容器,所有的狀態的變化都是當前狀態和 Action 共同的作用結果。 對於view來說,不用關心數據是怎樣變化,只需要在 view 層面等待 store 通知自己數據發生變化,然后把數據渲染成頁面即可。

  2. Redux 和 React 之間沒有關系
    Redux 和 React 之間沒有關系。Redux 支持 React、Angular、Ember、jQuery 甚至純 JavaScript。 盡管如此,Redux 還是和 React 和 Deku 這類框架搭配起來用最好,因為這類框架允許你以 state 函數的形式來描述界面,Redux 通過 action 的形式來發起 state 變化。

  3. redux中的action、reducer、store三者之間的概念
    應用中所有的 state 都以一個對象樹的形式儲存在一個單一的 store 中
    惟一 改變 state 的辦法是觸發 action ,一個描述發生什么的對象。
    為了 描述 action 如何改變 state 樹,你需要編寫 reducers

  4. 示意圖
    用戶產生action-->store.dispatch(action)-->reducer(state,action)-->store.getState();
    示意圖


Redux API

Redux 的 API 非常少。Redux 定義了一系列的約定(contract)來讓你來實現(例如 reducers),同時提供少量輔助函數來把這些約定整合到一起。

這一章會介紹所有的 Redux API。記住,Redux 只關心如何管理 state。在實際的項目中,你還需要使用 UI 綁定庫如 react-redux。

頂級暴露的方法
  • createStore(reducer, [initialState]) 【 創建 一個Redux store 來以存放應用中所有的 state。 應用中應有且僅有一個 store。】
  • combineReducers(reducers) 【combineReducers 輔助函數的作用是,把一個由多個不同 reducer 函數作為 value 的 object,合並成一個最終的 reducer 函數,然后就可以對這個 reducer 調用 createStore。】
  • applyMiddleware(...middlewares) 【Middleware 可以讓你包裝 store 的 dispatch 方法來達到你想要的目的。】
  • bindActionCreators(actionCreators, dispatch) 【惟一使用 bindActionCreators 的場景是當你需要把 action creator 往下傳到一個組件上,卻不想讓這個組件覺察到 Redux 的存在,而且不希望把 Redux store 或 dispatch 傳給它。】
  • compose(...functions) 【從右到左來組合多個函數。 這是函數式編程中的方法,為了方便,被放到了 Redux 里。 當需要把多個 store 增強器 依次執行的時候,需要用到它。】
Store API
  • Store 【Store 就是用來維持應用所有的 state 樹 的一個對象。 改變 store 內 state 的惟一途徑是對它 dispatch 一個 action。】
    • getState() 【返回應用當前的 state 樹。 它與 store 的最后一個 reducer 返回值相同。】
    • dispatch(action) 【分發 action。這是觸發 state 變化的惟一途徑。】
    • subscribe(listener) 【添加一個變化監聽器。每當 dispatch action 的時候就會執行,state 樹中的一部分可能已經變化。你可以在回調函數里調用 getState() 來拿到當前 state。】
    • getReducer()
    • replaceReducer(nextReducer) 【替換 store 當前用來計算 state 的 reducer。】

React Redux

Redux 官方提供的 React 綁定庫。 具有高效且靈活的特性。本庫並不是 Redux 內置,需要單獨安裝。 一般會和 Redux 一起使用

API
  • 使組件層級中的 connect() 方法都能夠獲得 Redux store。正常情況下,你的根組件應該嵌套在 中才能使用 connect() 方法。】
  • connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]) 【連接 React 組件與 Redux store。 連接操作不會改變原來的組件類,反而返回一個新的已與 Redux store 連接的組件類。】

demo 介紹

目錄結構:

| -- actions             #action文件夾
| -- components          #組件文件夾
| -- constants           #ActionTypes 文件夾
| -- containers          #容器文件夾(一般存放APP.js)
| -- reducers            #reducers文件夾
| -- 以及一些其它基本文件

demo地址: todoMVC


參考文檔


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM