1. 程式人生 > >React Native之Redux動態插入reducer

React Native之Redux動態插入reducer

       RN的使用狀態管理我們使用的方式大多數有倆種,分別是redux和mobx這倆種狀態工具。那麼這次選取redux考慮一個東西---reducer的動態注入。

     首先說一下背景----假如說你的app有100 reducer,而我們的store是唯一的。那麼我們在初始化的時候,是要進行一次性初始化掉我們的100reducer,那麼這個方式是多麼影響我們的效能,如果是1000reducer呢。這個時候便考慮到是否能做到需要的時候進行一個動態注入,這樣的話我們的reducer都會出現 <= 100,而且最點100個reducer可能真正使用不到一半。所以非常有必要去弄一個動態註冊。

      那麼首先背景知道了,那麼我們需要到其他的東西。便是唯一的store裡面初始化的reducer。

先了解一下關於redux 裡面的combineReducers需要的一個操作便是整合所有的reducer,就是需要的。那麼接下來我們需要到其他的操作,便是:

export const Reducer = (store,key,reducer)=>{

if (Object.hasOwnProperty.call(store.asyncReducer, key)) return;

store.asyncReducer[key] = reducer;

store.replaceReducer(makeReducer(store.asyncReducer));

};


將我將我們的reducer替換掉我們的store。

那麼我們一開始的store將需要獲取到手,那麼需要到我們初始化的時候需要自定義建立一下關於我們的初始化reducer其實也是store的初始化:

import {applyMiddleware, compose, createStore} from 'redux';

import thunk from 'redux-thunk';

import {makeReducer} from './reducerUtils';

import promiseMiddleware from 'redux-promise-middleware'

import thunkMiddleware from 'redux-thunk';



export default (initialReducer = {},initialState = {}) => {

    const middlewares = [thunk];



    const enhancers = [];

    const store = createStore(

        makeReducer(initialReducer),

        initialState,

        compose(

            applyMiddleware(thunkMiddleware, promiseMiddleware()),

            ...enhancers

        )

    );



    store.asyncReducers = {

        ...initialReducer

    };



    return store;

}

那麼我們先去 初始化我們的store,那麼需要到其他的東西:關於

makeAllReducer

那麼使用到倆個地方了~~可見其作用性。那麼繼續說下去關於
makeReducer = (asyncReducers)=>{
    return combineReducers(asyncReducers)};

其實到這邊,我們應該大概都知道了~~一開始先初始化一下我們的最早的store,下面我們在使用到Reducer進行動態註冊,那麼初始化的store不需要進行一次性把所有的註冊進去,只需要把我們的navigation註冊進行,在去頁面進行動態的初始化。那麼redux動態註冊就到這邊了。

還有----拒絕轉載~~~~原創不容易