为React Native异步注入Reducers和Sagas

时间:2017-05-15 02:01:55

标签: javascript reactjs react-native react-navigation

我有一个由reactjs,redux和react-router组成的web应用程序,我使用代码分割技术异步注入sagas和redurs。现在我想使用本机反应。我已经知道反应导航是路由游戏中最好的选择。但是我不知道我怎么能像我用反应路由器那样异步注入传气和减速器。

routes.js

import { getAsyncInjectors } from './utils/asyncInjectors';
import AppReducer from './containers/App/reducers';
import AppSagas from './containers/App/sagas';

const errorLoading = (err) => {
  console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
};

const loadModule = (cb) => (componentModule) => {
  cb(null, componentModule.default);
};

export default function createRoutes(store) {
  // Create reusable async injectors using getAsyncInjectors factory
  const { injectReducer, injectSagas } = getAsyncInjectors(store); // eslint-disable-line no-unused-vars

  // We need these reducers and saga upfront
  injectReducer('global', AppReducer);
  injectSagas(AppSagas);

  return [
    {
      path: '/',
      name: 'Dashboard',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          System.import('./containers/HomeScreen'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([component]) => {
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    },
  ];
}


export function injectAsyncReducer(store, isValid) {
  return function injectReducer(name, asyncReducer) {
    if (!isValid) checkStore(store);

    invariant(
      isString(name) && !isEmpty(name) && isFunction(asyncReducer),
      '(app/utils...) injectAsyncReducer: Expected `asyncReducer` to be a reducer function'
    );

    if (Reflect.has(store.asyncReducers, name)) return;

    store.asyncReducers[name] = asyncReducer; // eslint-disable-line no-param-reassign
    store.replaceReducer(createReducer(store.asyncReducers));
  };
}

export function getAsyncInjectors(store) {
  checkStore(store);

  return {
    injectReducer: injectAsyncReducer(store, true),
    injectSagas: injectAsyncSagas(store, true),
  };
}

如何在使用反应导航时应用相同的概念?这会给应用程序初始加载时间带来什么好处吗?

0 个答案:

没有答案