Redux架構怎么在ReactNative中使用？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
為什么要使用Redux?
背景：
RN的state（可變，子組件不可見）和props（不可變，子組件可見）的設計，在面對大型項目時候，容易因為不經意修改state造成狀態(tài)混亂，組件渲染錯誤
RN使用了Virtual DOM，不需要Target綁定->Action修改UI屬性，只要當狀態(tài)變化，render新狀態(tài)下的組件，數據單向傳遞，而MVC的設計模式存在雙向數據流。
RN不易進行測試，Redux提供了非常方便的mock測試方式。
Redux開發(fā)
開發(fā)環(huán)境
安裝Redux： ‘npm install –save redux'
安裝React Native和Redux綁定庫：npm install –save react-redux
安裝Redux Thunk異步Action中間件：npm install –save redux-thunk
三個原則
單一數據源
整個應用的 state 被儲存在一個對象樹中，對象樹存在于唯一的 store 中。store中的 state 綁定到組件
State 是只讀的
惟一改變 state 的方法就是觸發(fā) action。action 是一個含有 type 屬性的普通JS對象，type 可以用常量表示事件。
使用純函數來執(zhí)行修改
編寫 reducers 來描述對應action如何修改 state 。一般可以用 switch(action.type) 來處理，無副作用
使用
react-redux提供了connect和Provider。
1.Provider是頂層的分發(fā)點，屬性就是Store，將State分發(fā)給所有被connect的組件
2.connect：接受兩個參數：一個是mapStateToProps或者mapDispatchToProps，一個是要綁定的組件本身。
Store
Store 就是把 Reducer 和 action 聯系到一起的對象。Store 有以下職責：
維持應用的 state–類似數據庫，存儲應用的所有state。
提供 getState() 方法。獲取 所有的當前state；
提供 dispatch(action) 方法更新 state，相當于存入數據庫，存入action來改變state。
通過 subscribe(listener) 注冊監(jiān)聽器。
Store本質上是一個對象，它以樹的形式保存了整個應用的State。并提供了一些方法。例如getState( ) 和 dispatch( )。
Redux應用只有惟一一個Store。
Store通過createStore方法來創(chuàng)建，根據整個應用的根Reducer的初始State。
代碼如下：
重慶分公司
重慶分公司
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';//異步
import reducers from './reducers';
const Store = applyMiddleware(thunk)(createStore)(reducers);
export default Store;Reducers
Action只是描述了有事情發(fā)生了這一事實，并沒有指明應用如何更新state。這是reducer要做的事情。
Reducer的本質是一個函數，并且是一個純函數。沒有任何副作用。簡單來講Reducer只負責做一件事，就是根據接收到的action和state來修改Store中的state：
(state, action) => newState
一般實現的時候，通過switch(action.type) 來判斷不同的Action，default為舊state。同時可以定義初始狀態(tài)。
代碼：
import { combineReducers } from 'redux';
const newState = (state = {}, action = {}) => {
switch (action.type) {
case ActionTypes.CSTATE:
return { ...state, ...action.state };
case '_DPDATACHANGE_':
return {...state, ...action.dpState};
default:
return state;
}
};
//Reducer 合并
export default combineReducers({
newState,
});注意:返回的是新state，如果需要保留部分舊state值，使用…state（ES7的對象展開語法，對對象會淺拷貝對應屬性，這里等價于Object.assign({}, state, newState)），而如果合并state的話只會合并一層，對復雜state需要手動合并。
Action
Action是一個普通JS對象，至少包括一個type屬性代表事件，其他屬性可以用來傳遞數據。實踐上對一個流程定義一個函數，流程可以包括網絡請求，最后返回Action，這個函數叫Action Creator。
代碼：Store可以dispatch這個Action，action的type表示標識符，state是它攜帶的數據。
export const newState = state => {
Store.dispatch({
type: ActionTypes.CSTATE,
state,
});
};持久化
當觸發(fā)action時根據其reducer key恢復數據，然后只需要在應用啟動時分發(fā)action，這也很容易抽象成可配置的拓展服務，實際上三方庫redux-persist已經為我們做好了這一切。
在Action中可以代碼如下：
export const getStorage = async (key) => {
const d = await AsyncStorage.getItem(key);
return JSON.parse(d);
};
export const setStorage = (key, value) => {
AsyncStorage.setItem(key, JSON.stringify(value));
};connect
通過- 提供 getState() 方法。獲取 所有的當前state
通過connect，綁定需要的state以及Action Creator到你的組件的props上，這樣組件就可以通過props來調用Action Creator，或者根據不同props來render()不同的組件。
代碼：
mapStateToProps({ newState }) {
const value = newState[name];//name: newState.name
return {
name,
};
},看完上述內容，你們掌握Redux架構怎么在ReactNative中使用的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創(chuàng)新互聯成都網站設計公司行業(yè)資訊頻道，感謝各位的閱讀！
另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
