Question

我编写了一个自定义逻辑，用于处理react-router-dom .v4中的异步路由加载包。完美地工作。但是我也听说了有用的程序包，它们具有不错的API，可以做到相同，例如React-Loadable。它有一个问题，我无法从Redux推动的props / state抛出该程序包。

在下面的两个示例中，我的代码从custom样式重写为react-loadable样式。最后一个是react-loadable版本，不会引发状态/道具。

我的个人密码：

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')))

相同的代码，但是带有React-Loadable：

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)

Answer 1

要通过提供者从Redux存储区获取状态，您应该将asyncComponent放在有状态组件包装中，就像在自定义异步逻辑中一样（第一种情况）。

这是因为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)

P.S。

我不知道您想做什么，但是如果要在当前商店内进行减速器注入（可能正是您要这样做），则需要通过import明确地包含Redux商店，而不是处于Provider状态。

如何通过React-Loadable获取状态？ React-Redux

1 个答案: