Redux架構(gòu)怎么在ReactNative中使用？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括環(huán)江網(wǎng)站建設(shè)、環(huán)江網(wǎng)站制作、環(huán)江網(wǎng)頁(yè)制作以及環(huán)江網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，環(huán)江網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到環(huán)江省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

為什么要使用Redux?

背景：

1. RN的state（可變，子組件不可見(jiàn)）和props（不可變，子組件可見(jiàn)）的設(shè)計(jì)，在面對(duì)大型項(xiàng)目時(shí)候，容易因?yàn)椴唤?jīng)意修改state造成狀態(tài)混亂，組件渲染錯(cuò)誤

2. RN使用了Virtual DOM，不需要Target綁定->Action修改UI屬性，只要當(dāng)狀態(tài)變化，render新?tīng)顟B(tài)下的組件，數(shù)據(jù)單向傳遞，而MVC的設(shè)計(jì)模式存在雙向數(shù)據(jù)流。

3. RN不易進(jìn)行測(cè)試，Redux提供了非常方便的mock測(cè)試方式。

Redux開發(fā)

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

1. 安裝Redux： ‘npm install –save redux'

2. 安裝React Native和Redux綁定庫(kù)：npm install –save react-redux

3. 安裝Redux Thunk異步Action中間件：npm install –save redux-thunk

三個(gè)原則

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

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

State 是只讀的

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

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

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

使用

react-redux提供了connect和Provider。

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

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

Store

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

1. 維持應(yīng)用的 state–類似數(shù)據(jù)庫(kù)，存儲(chǔ)應(yīng)用的所有state。

2. 提供 getState() 方法。獲取 所有的當(dāng)前state；

3. 提供 dispatch(action) 方法更新 state，相當(dāng)于存入數(shù)據(jù)庫(kù)，存入action來(lái)改變state。

4. 通過(guò) subscribe(listener) 注冊(cè)監(jiān)聽(tīng)器。

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

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

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

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

(state, action) => newState

一般實(shí)現(xiàn)的時(shí)候，通過(guò)switch(action.type) 來(lái)判斷不同的Action，default為舊state。同時(shí)可以定義初始狀態(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的對(duì)象展開語(yǔ)法，對(duì)對(duì)象會(huì)淺拷貝對(duì)應(yīng)屬性，這里等價(jià)于Object.assign({}, state, newState)），而如果合并state的話只會(huì)合并一層，對(duì)復(fù)雜state需要手動(dòng)合并。

Action

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

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

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

持久化

當(dāng)觸發(fā)action時(shí)根據(jù)其reducer key恢復(fù)數(shù)據(jù)，然后只需要在應(yīng)用啟動(dòng)時(shí)分發(fā)action，這也很容易抽象成可配置的拓展服務(wù)，實(shí)際上三方庫(kù)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

通過(guò)- 提供 getState() 方法。獲取 所有的當(dāng)前state

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

代碼：

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

看完上述內(nèi)容，你們掌握Redux架構(gòu)怎么在ReactNative中使用的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章標(biāo)題：Redux架構(gòu)怎么在ReactNative中使用-創(chuàng)新互聯(lián)
分享路徑：http://www.chinadenli.net/article32/dcspsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、微信公眾號(hào)、網(wǎng)站制作、外貿(mào)建站、建站公司、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)