這篇文章主要介紹了ReactNative中使用Redux架構總結，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
本文介紹了ReactNative中使用Redux架構總結，分享給大家。具體如下：
使用Redux也有一段時間了。總結一下。
為什麼要使用Redux?
背景：
#RN的state（可變，子元件不可見）和props（不可變，子元件可見）的設計，在面對大型專案時候，容易因為不經意修改state造成狀態混亂，元件渲染錯誤
RN使用了Virtual DOM，不需要Target綁定->Action修改UI屬性，只要當狀態變化，render新狀態下的元件，資料單向傳遞，而MVC的設計模式存在雙向資料流。
RN不易進行測試，Redux提供了非常方便的mock測試方式。
Redux開發
開發環境
安裝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 的方法就是觸發 action。 action 是一個含有 type 屬性的普通JS對象，type 可以用常數表示事件。
使用純函數來執行修改
寫 reducers 來描述對應action如何修改 state 。一般可以用 switch(action.type) 來處理，無副作用
使用
react-redux提供了connect和Provider。
1.Provider是頂層的分發點，屬性就是Store，將State分發給所有被connect的元件
2.connect：接受兩個參數：一個是mapStateToProps或者mapDispatchToProps，一個是要綁定的元件本身。
Store
Store 就是把 Reducer 和 action 連結在一起的物件。 Store 有以下職責：
維持應用程式的 state–類似資料庫，儲存應用程式的所有state。
提供 getState() 方法。取得 所有的目前state;
提供 dispatch(action) 方法更新 state，相當於存入資料庫，存入action來改變state。
透過 subscribe(listener) 註冊監聽器。
Store本質上是一個對象，它以樹的形式保存了整個應用的State。並提供了一些方法。例如getState( ) 和 dispatch( )。
Redux應用程式只有惟一一個Store。
Store透過createStore方法來創建，根據整個應用的根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只是描述了有事情發生了這一事實，並沒有指明應用程式如何更新state。這是reducer要做的事情。
Reducer的本質是一個函數，並且是一個純函數。沒有任何副作用。簡單來講Reducer只負責做一件事，就是根據收到的action和state來修改Store中的state：
(state, action) => newState
#一般實作的時候，透過switch(action.type) 來判斷不同的Action，default為舊state。同時可以定義初始狀態。
#程式碼：
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,
});
};持久化
當觸發action時根據其reducer key恢復數據，然後只需要在應用啟動時分發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,
};
},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
相关推荐：
JavaScript技巧中关于react-redux中connect()方法详细解析
以上是ReactNative中使用Redux架構總結_javascript技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
