0

我编写了一个自定义逻辑来处理 react-router-dom .v4 中的异步路由加载包。这是完美的工作。但我也听说过有用的包和漂亮的 API 来做同样的事情，比如React-Loadable. 它有一个问题，我无法在组件的挂载上获取从 Redux 推送的道具/状态，抛出这个包。

在下面的两个示例中，我的代码从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)
4

1 回答 1

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)

附言

我不知道您尝试做什么，但如果如何在当前存储中进行减速器注入（可能正是您尝试做的），您需要明确地包含您的 Redux 存储import，而不是来自Provider状态。

于 2018-10-15T08:55:34.243 回答