Javascript 如何通过React Loadable获取状态？反应还原

我在react router dom.v4中编写了一个用于处理异步路由加载包的自定义逻辑。这工作做得很好。但我也听说有一个很有用的软件包，它有很好的API来做同样的事情，比如

React Loadable

。它有一个问题，我无法在这个包的组件挂载上从Redux推送道具/状态

在下面的两个示例中，我的代码从

自定义

样式重写为

可加载

样式。最后一个是react可加载版本，它不抛出state/props

我的个人密码：

const asyncComponent = getComponent => {
  return class AsyncComponent extends React.Component {
    static Component = null;

    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      const { Component } = this.state

      if (!Component) {
        getComponent().then(({ default: Component }) => {
          const { store } = this.props // CAN GET THE REDUX STORE

          AsyncComponent.Component = Component;
          this.setState({ Component });
        });
      }
    }

    render() {
      const { Component } = this.state;

      if (Component) {
        return <Component {...this.props} />
      }

      return null;
    }
  };
};

export default withRouter(asyncComponent(() => import(/* webpackChunkName: "chunk_1" */ './containers/Component')))

const asyncComponent=getComponent=>{
返回类AsyncComponent扩展了React.Component{
静态组件=空；
状态={Component:AsyncComponent.Component}；
组件willmount（）{
const{Component}=this.state
如果（！组件）{
getComponent（）。然后（{default:Component}）=>{
const{store}=this.props//可以获取REDUX存储
AsyncComponent.Component=组件；
this.setState（{Component}）；
});
}
}
render（）{
const{Component}=this.state；
if（组件）{
回来
}
返回null；
}
};
};
使用路由器导出默认值（asyncComponent（（）=>import（/*webpackChunkName:“chunk_1”*/'./容器/组件”））

相同的代码，但具有可加载的React：

const Loading = () => {
  return <div>Loading...</div>;
}

const asyncComponent = Loadable({
  loader: () => import(/* webpackChunkName: "" */ './containers/Component')
    .then(state => {    
      const { store } = this.props // CANNOT GET THE REDUX STORE!!
    }),
  loading: Loading
})

export default withRouter(asyncComponent)

常量加载=（）=>{
返回装载。。。；
}
常量asyncComponent=可加载({
加载程序：（）=>导入（/*webpackChunkName:“*/”./containers/Component'））
.然后（状态=>{
const{store}=this.props//无法获取REDUX存储！！
}),
装货：装货
})
使用路由器导出默认值（异步组件）

要通过提供程序从

Redux

存储获取状态，您应该像在自定义异步逻辑（第一种情况）中一样，将

异步组件

放在有状态组件包装器中

这是因为

Loadable

库像函数而不是构造函数一样返回

asyncComponent

，这样他就无法访问当前的

Redux

存储。因此，工作解决方案将是下一个：

const Loading = () => {
  return <div>Loading...</div>;
}

const asyncComponent = Loadable({
  loader: () => import(/* webpackChunkName: "" */ './containers/Component')
    .then(state => {    
      const { store } = this.props // YOU WILL GET THE REDUX STORE!!
    }),
  loading: Loading
})

class asyncComponentWrapper extends Component{ // Component wrapper for asyncComponent
  render() {
    return <asyncComponent {...this.props} />
  }
}

export default withRouter(asyncComponentWrapper)

常量加载=（）=>{
返回装载。。。；
}
常量asyncComponent=可加载({
加载程序：（）=>导入（/*webpackChunkName:“*/”./containers/Component'））
.然后（状态=>{
const{store}=this.props//您将获得REDUX商店！！
}),
装货：装货
})
类asyncComponentWrapper扩展了asyncComponent的组件{//组件包装器
render（）{
回来
}
}
使用路由器导出默认值（asyncComponentWrapper）

附言

---

我不知道你想做什么，但如果你想在当前商店中注入还原剂（可能正是你想做的），你需要通过

import

，而不是从

Provider

状态显式地包含你的Redux商店。

Wow。。。这很有趣。我需要一点时间来测试它！