ReactNative中使用Redux架構(gòu)總結(jié)

本文介紹了ReactNative中使用Redux架構(gòu)總結(jié)，分享給大家。具體如下：

使用Redux也有一段時間了。總結(jié)一下。

為什么要使用Redux?

背景：

1. RN的state（可變，子組件不可見）和props（不可變，子組件可見）的設(shè)計，在面對大型項目時候，容易因為不經(jīng)意修改state造成狀態(tài)混亂，組件渲染錯誤
2. RN使用了Virtual DOM，不需要Target綁定->Action修改UI屬性，只要當(dāng)狀態(tài)變化，render新狀態(tài)下的組件，數(shù)據(jù)單向傳遞，而MVC的設(shè)計模式存在雙向數(shù)據(jù)流。
3. RN不易進(jìn)行測試，Redux提供了非常方便的mock測試方式。

Redux開發(fā)

開發(fā)環(huán)境

1. 安裝Redux： ‘npm install –save redux'
2. 安裝React Native和Redux綁定庫：npm install –save react-redux
3. 安裝Redux Thunk異步Action中間件：npm install –save redux-thunk

三個原則

單一數(shù)據(jù)源

整個應(yīng)用的 state 被儲存在一個對象樹中，對象樹存在于唯一的 store 中。store中的 state 綁定到組件

State 是只讀的

惟一改變 state 的方法就是觸發(fā) action。action 是一個含有 type 屬性的普通JS對象，type 可以用常量表示事件。

使用純函數(shù)來執(zhí)行修改

編寫 reducers 來描述對應(yīng)action如何修改 state 。一般可以用 switch(action.type) 來處理，無副作用

使用

react-redux提供了connect和Provider。

1.Provider是頂層的分發(fā)點，屬性就是Store，將State分發(fā)給所有被connect的組件

2.connect：接受兩個參數(shù)：一個是mapStateToProps或者mapDispatchToProps，一個是要綁定的組件本身。

Store

Store 就是把 Reducer 和 action 聯(lián)系到一起的對象。Store 有以下職責(zé)：

1. 維持應(yīng)用的 state–類似數(shù)據(jù)庫，存儲應(yīng)用的所有state。
2. 提供 getState() 方法。獲取 所有的當(dāng)前state；
3. 提供 dispatch(action) 方法更新 state，相當(dāng)于存入數(shù)據(jù)庫，存入action來改變state。
4. 通過 subscribe(listener) 注冊監(jiān)聽器。

Store本質(zhì)上是一個對象，它以樹的形式保存了整個應(yīng)用的State。并提供了一些方法。例如getState( ) 和 dispatch( )。

Redux應(yīng)用只有惟一一個Store。

Store通過createStore方法來創(chuàng)建，根據(jù)整個應(yī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ā)生了這一事實，并沒有指明應(yīng)用如何更新state。這是reducer要做的事情。

Reducer的本質(zhì)是一個函數(shù)，并且是一個純函數(shù)。沒有任何副作用。簡單來講Reducer只負(fù)責(zé)做一件事，就是根據(jù)接收到的action和state來修改Store中的state：

(state, action) => newState

一般實現(xiàn)的時候，通過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的對象展開語法，對對象會淺拷貝對應(yīng)屬性，這里等價于Object.assign({}, state, newState)），而如果合并state的話只會合并一層，對復(fù)雜state需要手動合并。

Action

Action是一個普通JS對象，至少包括一個type屬性代表事件，其他屬性可以用來傳遞數(shù)據(jù)。實踐上對一個流程定義一個函數(shù)，流程可以包括網(wǎng)絡(luò)請求，最后返回Action，這個函數(shù)叫Action Creator。

代碼：Store可以dispatch這個Action，action的type表示標(biāo)識符，state是它攜帶的數(shù)據(jù)。

export const newState = state => {
 Store.dispatch({
 type: ActionTypes.CSTATE,
 state,
 });
};

持久化

當(dāng)觸發(fā)action時根據(jù)其reducer key恢復(fù)數(shù)據(jù)，然后只需要在應(yīng)用啟動時分發(fā)action，這也很容易抽象成可配置的拓展服務(wù)，實際上三方庫redux-persist已經(jīng)為我們做好了這一切。

在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() 方法。獲取 所有的當(dāng)前state

通過connect，綁定需要的state以及Action Creator到你的組件的props上，這樣組件就可以通過props來調(diào)用Action Creator，或者根據(jù)不同props來render()不同的組件。

代碼：

mapStateToProps({ newState }) {
 const value = newState[name];//name: newState.name
 return {
 name,
 };
 },

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com