javascript - 我无法理解这段代码(针对 React/Redux)是如何工作的

Question

我有一个关于 React/Redux 的问题。

我正在制作一个网络应用程序。它按照我想要的方式完美地工作，没有任何问题。虽然我不太明白。我不明白的部分是这部分。

这是我的代码。

const myApps = () => {
  let myInfo = {};
  const form = [];
  form.push(<div>what</div>);
  myInfo = form.reduce((prev, element, index) => {
    prev[index] = {isTrue : false};
    return prev;
  }, {});
}

useEffect(() => {
    uploadToRedux(myInfo); // this is redux dispatch. I upload to redux "only" here.
}, []);

myInfo[0].isTrue = true;

if (myInfo[0].isTrue) console.log('Correct!');
else console.log('Incorrect!');

仅当 myInfo 是 componentDidMount 时，我才会使用 useEffect 将其发送到 Redux。顺便说一句，当我切换 myInfo[0].isTrue = true 时，redux 中的状态会同时更改。即使我没有发送快件!

当然，这就是我想要的，但是即使我没有发送dispatch，redux中的状态有没有变化？怎么会这样？

Answer 1

请注意，您正在将一个函数作为回调传递给 useEffect()。

() => {
  uploadToRedux(myInfo); // this is redux dispatch. I upload to redux "only" here.
}

useEffect()会立即执行，但匿名函数(回调)将被安排由JS运行时执行(即准备执行但实际上尚未执行)。

当回调即将执行并更新 redux 中的值时，JS 运行时已经执行了 useEffect() 之后的代码行，即以下代码行将在 redux 更新之前执行:

myInfo[0].isTrue = true;

if (myInfo[0].isTrue) console.log('Correct!');
else console.log('Incorrect!');

因此，当 JS 运行时将执行以下行:

uploadToRedux(myInfo);

myInfo[0].isTrue 的值已被更新，并且同样将进入 redux。

这种现象被称为回调 hell 。要了解更多信息，请阅读:http://callbackhell.com/

为了确定，在 redux 更新之前记录 myInfo[0].isTrue 的值

useEffect(() => {
  console.log("myInfo[0].isTrue", myInfo[0].isTrue);
  uploadToRedux(myInfo); // this is redux dispatch. I upload to redux "only" here.
}, []);