useSelector hook偶现数据不更新的情况

[CastileMan]

问题描述

@tarojs/redux 中 useSelector 将 useLayoutEffect 直接替换为 useEffect，因此执行顺序出现变化，导致hook返回的数据为旧数据

复现步骤

1. 打开use-selector.js
2. 查看下方代码注释

   // @tarojs/redux => src/hooks/use-selector.js

  Taro.useEffect(function () {
    latestSelector.current = selector;
    // 2. 然而由于useEffects是异步执行，因此会将闭包中的旧数据赋值给 latestSelectedState.current，
    //    最终导致之后返回的结果为更新前的旧数据
    latestSelectedState.current = selectedState;
    latestSubscriptionCallbackError.current = undefined;
  });
  Taro.useEffect(function () {
    function checkForUpdates() {
      try {
        var newSelectedState = latestSelector.current(store.getState());

        if (equalityFn(newSelectedState, latestSelectedState.current)) {
          return;
        }

        // 1. store数据发生变化后，此处会先执行，将latestSelectedState.current更新为最新数据
        latestSelectedState.current = newSelectedState;
      } catch (err) {
        // we ignore all errors here, since when the component
        // is re-rendered, the selectors are called again, and
        // will throw again, if neither props nor store state
        // changed
        latestSubscriptionCallbackError.current = err;
      }

      forceRender({});
    }
  // ... 

期望行为

useSelector正确返回更新后的数据

报错信息

无报错error信息，只是返回的数据不对

系统信息

Taro CLI 1.3.25 environment info:
System:
OS: Windows 10
Binaries:
Node: 8.9.0 - E:\nodejs\node.EXE
Yarn: 1.3.2 - ~\AppData\Roaming\npm\yarn.CMD
npm: 5.5.1 - E:\nodejs\npm.CMD

补充信息

useLayoutEffect 与 useEffect 的执行顺序不同，导致数据被重置为更新前的旧数据

[taro-bot]

CC @Chen-jj

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Chen-jj]

@CastileMan 完整的项目提供一下

[CastileMan]

已经给了demo代码，有进展吗 @Chen-jj

[mcmichaelchan]

请问这个问题有进展吗？同样遇到这个问题

[mcmichaelchan]

@Chen-jj 我以前也是HWFC的哦~

[azumia]

现在问题解决了吗？

[Chen-jj]

@mcmicahelchan @azumia 有可复现的 demo 提供一下么？

[Chen-jj]

@mcmicahelchan 哈哈我就是那个和你同名的师兄