代码之家  ›  专栏  ›  技术社区  ›  Sabbiu Shah

如何动态加载减速器

  •  0
  • Sabbiu Shah  · 技术社区  · 6 年前

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

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

    动态加载组件时,如何动态加载与特定组件相关的减速机?

    我正在使用创建react项目 创建react应用程序 这些是软件包版本

    "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} />
    

    渲染组件时,是否有更简单的方法加载/注入相应的还原器

    1 回复  |  直到 6 年前
        1
  •  0
  •   Sabbiu Shah    6 年前

    正如@Lutoykov所建议的,动态加载减速机的方法是 store.replaceReducer(configureReducers(reducer))

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

    这是我的github repo以及完整的解决方案。它遵循第条中给出的步骤。 https://github.com/sabbiu/dynamic-reducers-for-react/