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

Question

我编写了一个自定义逻辑，用于处理react-router-dom .v4中的异步路由加载包。工作完美。但我也听说过一些有用的包，具有很好的 API 来执行相同的操作，例如 React-Loadable。它有一个问题，我无法在抛出此包的组件挂载上获取从 Redux 推送的 props/state。

在下面的两个示例中，我的代码从 custom 样式重写为 react-loadable 样式。最后一个是react-loadable版本，不会抛出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')))

相同的代码，但使用 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

要通过 Provider 从 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)

附注

我不知道你想做什么，但是如果如何在当前存储中进行 reducer 注入(inject)(可能正是你想要做的)，你需要通过 import< 显式包含你的 Redux 存储，不是来自 Provider 状态。