-
Redux 是一個狀態容器
Redux 就像是作者自己的介紹,它不會為你提供任何的東西,它不會告訴你如何做路由,它只專注於應用程序狀態,是一個 JavasSript 的狀態容器,所有的狀態的變化都是當前狀態和 Action 共同的作用結果。 對於view來說,不用關心數據是怎樣變化,只需要在 view 層面等待 store 通知自己數據發生變化,然后把數據渲染成頁面即可。 -
Redux 和 React 之間沒有關系
Redux 和 React 之間沒有關系。Redux 支持 React、Angular、Ember、jQuery 甚至純 JavaScript。 盡管如此,Redux 還是和 React 和 Deku 這類框架搭配起來用最好,因為這類框架允許你以 state 函數的形式來描述界面,Redux 通過 action 的形式來發起 state 變化。 -
redux中的action、reducer、store三者之間的概念
應用中所有的 state 都以一個對象樹的形式儲存在一個單一的 store 中 。
惟一 改變 state 的辦法是觸發 action ,一個描述發生什么的對象。
為了 描述 action 如何改變 state 樹,你需要編寫 reducers 。 -
示意圖
用戶產生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
