如何通过 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 store 获取状态，您应该将 asyncComponent 放在有状态组件包装器中，就像您在自定义异步逻辑中所做的那样（第一种情况）。

因为 Loadable 库 returns 你 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.

我不知道你想做什么，但如果如何在当前商店中进行 reducer 注入（可能这正是你想做的），你需要通过 [=16 显式地包含你的 Redux 商店=]，而不是来自 Provider 状态。

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

How to get state via React-Loadable? React-Redux

javascript

reactjs

react-loadable