Question

我有一个redux连接组件，我使用componentDidUpdate来处理很多逻辑，它开始变得混乱。

我的componentDidUpdate看起来有点像这样：

  componentDidUpdate(prevProps: Props) {
    if (this.props === prevProps) {
      return;
    }

    const {
      history,
      a,
      b,
      c
    } = this.props;

    if (!prevProps.a && !a) {
      this.proceedToNextStep();
      return;
    }

    if (b.length === b.length + 1) {
      history.push(rootUrl);
      return;
    }

    if (c != prevProps.c) {
      // do stuff
      return;
    }
  }

道具会因redux动作而改变，但我不知道更好的地方来确定redux连接组件中某些地方的变化。

对于一个属性来说这可能是错误的，但是这里出现了更多的逻辑，这已经很混乱了。

Answer 1

你可以把你的逻辑放在：

componentWillReceiveProps(nextProps)：这将至少避免在执行组件逻辑之前重新呈现组件。 newProps将包含Redux connect
mapsTateToProps：Redux connect第三个参数是一个回调，发送合并道具:(状态道具+调度道具+自己的组件道具）
observables包含在Redux promise中：这对我来说是处理逻辑的最佳选择，因为它不涉及React组件：我可以链接js逻辑（带有observables），并且每个在逻辑执行步骤中，我可以触发dispatch()并访问应用程序Redux state。 redux-observable模块混合使用RxJS模块（observables）和Redux promise模块（redux promise）以便于使用。

将逻辑移出componentDidUpdate的提示

1 个答案: