React Router 4下动态加载Redux Reducers的实现问题

我明白你在React Router 4里遇到的动态注入Reducer的问题——毕竟RR4从配置式路由改成了组件式，之前RR3那套直接在路由配置里加逻辑的方式确实行不通了。下面给你一套可行的方案，一步步来：

首先，你的Store不能直接用combineReducers导出静态reducer，得改成可动态更新的。修改你的Store创建代码（比如store.js）：

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { routerReducer } from 'react-router-redux';
import modalReducer from '../modules/modal';

// 初始化默认的基础reducers
const initialReducers = {
  routing: routerReducer,
  modal: modalReducer
};

// 封装创建根reducer的函数，用于动态合并reducers
const createRootReducer = (reducers) => combineReducers(reducers);

export default function configureStore(initialState) {
  const store = createStore(
    createRootReducer(initialReducers),
    initialState,
    // 这里添加你的中间件，比如thunk/saga等，按需配置
    applyMiddleware()
  );

  // 给Store新增injectReducer方法，用于动态注入新reducer
  store.injectReducer = (key, reducer) => {
    // 避免重复注入相同key的reducer
    if (initialReducers[key]) return;
    
    // 将新reducer加入全局reducer集合
    initialReducers[key] = reducer;
    // 替换根reducer，让Store感知到变化
    store.replaceReducer(createRootReducer(initialReducers));
  };

  return store;
}

这里的核心是Redux原生提供的store.replaceReducer方法，它允许我们动态替换根reducer，这是实现动态注入的基础。

接下来写一个HOC，用来包裹需要注入Reducer的路由组件，让组件挂载时自动触发注入逻辑：

Hooks版本（适合函数组件） #

import React, { useEffect } from 'react';
import { useStore } from 'react-redux';

const withReducer = (key, reducer) => (WrappedComponent) => {
  const WithReducer = (props) => {
    const store = useStore();

    useEffect(() => {
      // 组件挂载时执行注入
      store.injectReducer(key, reducer);
    }, [store, key, reducer]);

    return <WrappedComponent {...props} />;
  };

  // 自定义组件名称，方便调试
  WithReducer.displayName = `WithReducer(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;

  return WithReducer;
};

export default withReducer;

Class组件版本 #

如果你还在使用类组件，可以用connect方式实现：

import React, { Component } from 'react';
import { connect } from 'react-redux';

const withReducer = (key, reducer) => (WrappedComponent) => {
  class WithReducer extends Component {
    componentDidMount() {
      const { injectReducer } = this.props;
      injectReducer(key, reducer);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  // 将injectReducer方法映射到组件props
  const mapDispatchToProps = (dispatch, { store }) => ({
    injectReducer: (key, reducer) => store.injectReducer(key, reducer)
  });

  WithReducer.displayName = `WithReducer(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;

  return connect(null, mapDispatchToProps)(WithReducer);
};

export default withReducer;

现在只需要在路由组件上包裹这个HOC，就能实现组件加载时自动注入对应的Reducer了。比如你有一个UserModule组件和对应的userReducer：

import React from 'react';
import { Route } from 'react-router-dom';
import withReducer from './withReducer';
import UserModule from './modules/UserModule';
import userReducer from './modules/userReducer';

// 用withReducer包裹目标组件，指定注入的reducer和对应的key
const UserModuleWithReducer = withReducer('user', userReducer)(UserModule);

// 在路由配置中使用包裹后的组件
const AppRoutes = () => (
  <div>
    <Route path="/users" component={UserModuleWithReducer} />
    {/* 其他路由配置... */}
  </div>
);

export default AppRoutes;

这样，当用户访问/users路由时，UserModuleWithReducer组件挂载，就会自动把userReducer注入到Store中，完全不需要在初始时加载所有Reducer。

• 确保你的React应用已经通过Provider组件把Store传递给了所有子组件。
• 如果使用Redux Saga等中间件需要动态注入saga，逻辑和这个类似，也可以封装一个withSaga的HOC来处理。
• 避免重复注入相同key的reducer，上面的代码已经做了判断，你也可以根据自己的需求调整逻辑。

内容的提问来源于stack exchange，提问作者S. Schenk