資料
我的理解
redux項(xiàng)目的動(dòng)機(jī)是維護(hù)state(這個(gè)狀態(tài)理解為UI狀態(tài)贫奠，服務(wù)器數(shù)據(jù)，dom效果)，設(shè)計(jì)之初的基本原則為
- 單一數(shù)據(jù)源，說(shuō)明他的所有的state都存在的一個(gè)樹(shù)形結(jié)構(gòu)中。
- state只讀，說(shuō)明以后再使用中不要改變state。
- state 只能通過(guò)action進(jìn)行更改邀层，
這三個(gè)原則主要體現(xiàn)了設(shè)計(jì)思想，有這些作為實(shí)踐指導(dǎo)遂庄，更加的容易理解redux.
因?yàn)槲伊私鈘edux是通過(guò)react-native ,所以我的學(xué)習(xí)思路是如何在react-native中使用寥院。可能不會(huì)涉及太多其他應(yīng)用的使用（其他應(yīng)用我也不會(huì)...）
Let's go
在開(kāi)始之前涛目，需要先整理下redux的基礎(chǔ)概念秸谢。
-
Action ，動(dòng)作 霹肝，只有通過(guò)action才可以觸發(fā)修改state 估蹄。action可以理解為一個(gè)動(dòng)作的標(biāo)示.json對(duì)象表示, 必須提供type .例如
<code>{ type: 'ADD_TODO', text: 'Build my first Redux app'}</code> -
Reducer ,這個(gè)詞 英語(yǔ)是減速器，根本無(wú)法理解嘛沫换，我也不知道為什么現(xiàn)在這個(gè)詞這么火臭蚁，有知道的可以告訴我。我的理解就是讯赏，應(yīng)該跟hadoop中的mapper,reducer差不多吧垮兑，mapper負(fù)責(zé)生成一個(gè)個(gè)key,value格式，reducer 負(fù)責(zé)混淆了漱挎，排序啦系枪，等等處理。這個(gè)詞在這里也是負(fù)責(zé)如何改變state狀態(tài)磕谅。他是一個(gè)處理函數(shù)私爷，形式如
<code>(previousState, action) => newState</code> - Store ,倉(cāng)庫(kù)，顧名思義怜庸，state需要保存在一個(gè)地方吧当犯，就是這里了垢村。
- Middleware割疾，這里介紹下中間件，一般使用的中間件為
* [redux-logger](https://github.com/evgenyrodionov/redux-logger) 日志記錄
* [redux-thunk](https://github.com/gaearon/redux-thunk) 支持異步請(qǐng)求
* [redux-promise](https://github.com/acdlite/redux-promise)
- Others
* combineReducers 合并reducer
終于可以開(kāi)始了
上面介紹的知識(shí)redux的知識(shí)嘉栓，下面才是重頭戲宏榕，因?yàn)閷W(xué)了這些拓诸，你還是無(wú)法再react-native中使用。好尷尬~ 慢慢來(lái)~
- 初始化一個(gè)react-native 項(xiàng)目
<code>react-native init redux-sample</code>
<code>npm install --save redux redux-logger redux-promise redux-thunk react-redux</code>
<code>react-native run-android</code> - 創(chuàng)建一個(gè)保存state的倉(cāng)庫(kù)吧,納尼~ redux 中的 <code>createStore</code> 必須要傳遞<code>reducer</code>麻昼，好吧奠支，如果想要?jiǎng)?chuàng)建<code>reducer</code>，就要好好規(guī)劃下抚芦，因?yàn)?lt;code>reducer</code> 需要接受<code>action</code>.看起來(lái)我是搞錯(cuò)順序了倍谜。這里需要一個(gè)場(chǎng)景，規(guī)劃<code>action reducer </code> 最后才能創(chuàng)建<code>store</code>.
假設(shè)一個(gè)場(chǎng)景叉抡，一個(gè)文本,默認(rèn)文本為0尔崔，點(diǎn)擊之后+1，好吧褥民。就簡(jiǎn)單點(diǎn)吧季春，我也是新手
好吧，結(jié)果是失斚怠Ｔ嘏！
- 首先ReduxSample初始化時(shí)候有state撵颊，但是點(diǎn)擊之后就獲取不到了宇攻。這里缺少一個(gè)<code>this._onPress.bind(this)</code>需要把當(dāng)前上下文綁定點(diǎn)擊之后才可以獲取到state。
- 但是點(diǎn)擊怎么無(wú)法觸發(fā)dispatch事件呢秦驯？因?yàn)樵趓eact-native中使用redux 尺碰，需要 <code>react-redux</code> ,上面已經(jīng)安裝過(guò)了，這里提到兩個(gè)核心概念<code>Provider connect</code>這里有一些需要注意的事項(xiàng)
- Provider 需要在應(yīng)用外層包裹
- Store 需要在初始化時(shí)候創(chuàng)建 译隘，不然無(wú)法配置provider
- connect 包裝組件亲桥，<code>connect(selector)(App)</code>,包裝之后則當(dāng)前this.props 中擁有了dispatch.通過(guò)selector把store中的state注入到this.props中，注意：不能在根對(duì)象<code>registerComponent</code>注入固耘，
那我們梳理下： 在react 應(yīng)用中题篷，需要通過(guò)redux 控制state ，那么一個(gè)動(dòng)作厅目，或者遠(yuǎn)程數(shù)據(jù)如何影響到視圖呢番枚？ 觸發(fā)action之后，reducer進(jìn)行處理损敷，更新state樹(shù)形結(jié)構(gòu)葫笼，之后通過(guò)connect(selector)把最新的state數(shù)據(jù)傳遞給組件this.props，視圖更新拗馒。
在寫(xiě)這段代碼時(shí)候路星，一定注意reducer中switch ...最好有一個(gè)default 返回，這樣前面就不用判斷了诱桂。下面附上部分代碼
擴(kuò)展
通過(guò)查看一些開(kāi)源項(xiàng)目發(fā)現(xiàn)創(chuàng)建store時(shí)候一般都需要加幾個(gè)中間件洋丐，異步請(qǐng)求呈昔，日志，可以參考 redux-logger 中的實(shí)例
<code>
import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import createLogger from 'redux-logger';
const logger = createLogger();
const store = createStore(
reducer,
applyMiddleware(thunk, promise, logger)
);
</code>
關(guān)于redux 官方推薦的其他第三方插件我還沒(méi)有使用過(guò)友绝。比如redux-actions
還有關(guān)于調(diào)試比如Redux DevTools Extension
remote-redux-devtools remote-redux-devtools-on-debugger 在react-native中一直沒(méi)有配置成功,有人有時(shí)間配置成功了可以告訴我聲哈堤尾。
