为了账号安全,请及时绑定邮箱和手机立即绑定

如何在Redux应用程序中动态加载reducers进行代码拆分?

如何在Redux应用程序中动态加载reducers进行代码拆分?

慕容森 2019-10-14 09:42:13
我要迁移到Redux。我的应用程序包含很多部分(页面,组件),因此我想创建许多化简器。Redux的例子表明,我应该使用它combineReducers()来生成一个reducer。另外,据我了解,Redux应用程序应具有一个存储,并且在应用程序启动后即会创建。创建商店时,我应该通过合并的减速器。如果应用程序不是太大,这是有道理的。但是,如果我构建多个JavaScript捆绑包怎么办?例如,应用程序的每个页面都有自己的捆绑软件。我认为在这种情况下,一个减速器组合不好。我浏览了Redux的源代码,发现了replaceReducer()功能。这似乎是我想要的。replaceReducer()当我在应用程序的各个部分之间移动时,我可以为应用程序的每个部分创建组合的reducer并使用。这是一个好方法吗?
查看完整描述

3 回答

?
跃然一笑

TA贡献1826条经验 获得超6个赞

这不是一个完整的答案,但应该可以帮助您入门。请注意,我并没有丢弃旧的减速器-我只是在组合列表中添加了新的减速器。我认为没有理由丢弃旧的reducer —即使在最大的应用程序中,您也不大可能拥有成千上万个动态模块,这是您可能希望断开应用程序中某些reducers的连接的原因。


reducers.js

import { combineReducers } from 'redux';

import users from './reducers/users';

import posts from './reducers/posts';


export default function createReducer(asyncReducers) {

  return combineReducers({

    users,

    posts,

    ...asyncReducers

  });

}

store.js

import { createStore } from 'redux';

import createReducer from './reducers';


export default function configureStore(initialState) {

  const store = createStore(createReducer(), initialState);

  store.asyncReducers = {};

  return store;

}


export function injectAsyncReducer(store, name, asyncReducer) {

  store.asyncReducers[name] = asyncReducer;

  store.replaceReducer(createReducer(store.asyncReducers));

}

routes.js

import { injectAsyncReducer } from './store';


// Assuming React Router here but the principle is the same

// regardless of the library: make sure store is available

// when you want to require.ensure() your reducer so you can call

// injectAsyncReducer(store, name, reducer).


function createRoutes(store) {

  // ...


  const CommentsRoute = {

    // ...


    getComponents(location, callback) {

      require.ensure([

        './pages/Comments',

        './reducers/comments'

      ], function (require) {

        const Comments = require('./pages/Comments').default;

        const commentsReducer = require('./reducers/comments').default;


        injectAsyncReducer(store, 'comments', commentsReducer);

        callback(null, Comments);

      })

    }

  };


  // ...

}

表达这一点可能会有更整洁的方式-我只是在说明这个想法。


查看完整回答
反对 回复 2019-10-14
?
波斯汪

TA贡献1811条经验 获得超4个赞

现在有一个模块,可将注入的reducer添加到redux存储中。它称为Redux注入器。


使用方法如下:


不要组合减速器。而是像平常一样将它们放在函数的(嵌套)对象中,但不合并它们。


使用redux-injector中的createInjectStore而不是redux中的createStore。


使用injectReducer注入新的reducer。


这是一个例子:


import { createInjectStore, injectReducer } from 'redux-injector';


const reducersObject = {

   router: routerReducerFunction,

   data: {

     user: userReducerFunction,

     auth: {

       loggedIn: loggedInReducerFunction,

       loggedOut: loggedOutReducerFunction

     },

     info: infoReducerFunction

   }

 };


const initialState = {};


let store = createInjectStore(

  reducersObject,

  initialState

);


// Now you can inject reducers anywhere in the tree.

injectReducer('data.form', formReducerFunction);

完全披露:我是模块的创建者。


查看完整回答
反对 回复 2019-10-14
  • 3 回答
  • 0 关注
  • 905 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信