首頁  >  文章  >  web前端  >  在ReactNative中如何使用Redux架構

在ReactNative中如何使用Redux架構

亚连
亚连原創
2018-06-20 16:23:301466瀏覽

這篇文章主要介紹了ReactNative中使用Redux架構總結,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧

本文介紹了ReactNative中使用Redux架構總結,分享給大家。具體如下:

使用Redux也有一段時間了。總結一下。

為什麼要使用Redux?

背景:

  1. #RN的state(可變,子元件不可見)和props(不可變,子元件可見)的設計,在面對大型專案時候,容易因為不經意修改state造成狀態混亂,元件渲染錯誤

  2. RN使用了Virtual DOM,不需要Target綁定->Action修改UI屬性,只要當狀態變化,render新狀態下的元件,資料單向傳遞,而MVC的設計模式存在雙向資料流。

  3. RN不易進行測試,Redux提供了非常方便的mock測試方式。

Redux開發

開發環境

  1. 安裝Redux: 'npm install –save redux'

  2. 安裝React Native和Redux綁定函式庫:npm install –save react-redux

  3. 安裝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 有以下職責:

  1. 維持應用程式的 state–類似資料庫,儲存應用程式的所有state。

  2. 提供 getState() 方法。取得 所有的目前state;

  3. 提供 dispatch(action) 方法更新 state,相當於存入資料庫,存入action來改變state。

  4. 透過 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,
      };
     },

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

在Angular中如何實作隱藏顯示

在Angular中如何實作敏感文字提示

在Angular中如何實現orderBy排序與模糊查詢

在javascript中如何取得鍵盤的keyCode

vue vuex vue-rouert 權限路由(詳細教學)

以上是在ReactNative中如何使用Redux架構的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn