React Native之Redux动态插入reducer

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fox_wei_hlz/article/details/80645029

       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动态注册就到这边了。

还有----拒绝转载~~~~原创不容易


展开阅读全文

没有更多推荐了,返回首页