Question

我在一个网站内有三个迷你网站。我希望主减速器存储身份验证信息。并且，各自的迷你网站存储它自己的减速机。因此，当浏览一个迷你站点时，必须加载相应的模板/组件和缩减器。请注意，我这样做是因为迷你网站中的商店是详尽无遗的

与此github repo类似。这个repo包含旧的react-router版本。我希望它能与react-router-v4和create-react-app

一起使用

如何在动态加载Component时动态加载与特定组件相关的Reducer？

我正在使用create-react-app创建反应项目，这些是包版本

"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-redux": "^5.0.7",
"react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",

这就是我动态加载组件的方式

class DynamicImport extends React.Component {
  state = { component: null };
  componentDidMount() {
    this.props
      .load()
      .then(module => this.setState(() => ({ component: module.default })));
  }

  render() {
    return this.props.children(this.state.component);
  }
}

const Admin = props => (
  <DynamicImport
    load={() => import("../views/Admin")}
  >
    {Component =>
      Component === null ? <div>Loading</div> : <Component {...props} />
    }
  </DynamicImport>
);

并在render（）

中

<Route path="/admin" component={Admin} />

在渲染组件时，是否有更简单的方法来加载/注入相应的Reducer

Answer 1

正如@lustoykov建议的那样，动态加载reducer的方法是store.replaceReducer(configureReducers(reducer))

这篇易于理解的文章详细介绍了如何设置动态缩减器。 https://tylergaw.com/articles/dynamic-redux-reducers/

这是我的github repo，其中包含完整的解决方案。它遵循文章中给出的步骤。 https://github.com/sabbiu/dynamic-reducers-for-react/

如何动态加载Reducer

1 个答案: