Javascript 如何处理React上下文分派中的状态更改后

我有一个react版本16应用程序。使用React的上下文、reducer概念处理状态更改

要更改状态并执行某些操作，可以按如下所示处理更改。例如，我在组件“接触”中。在这里面，我在一个可变的年龄上发送一个状态变化，这个年龄是一个数字，如下所示-

dispatch({
    type: "CHANGE_AGE",
    payload: age
})

并在减速器中进行调度，如下所示

case "CHANGE_AGE":
    return {
        ...state,
        age: action.payload
    }

要在年龄发生变化后在“接触”组件中执行某些操作，我们可以使用“useEffect”观察“年龄”的变化

useEffect({
    //doSomething()
},[state.age])

问题是-如果我们必须改变一个状态的对象，即不改变年龄，我们必须改变地址，如下所示，我们必须在地址改变后做一些事情

我们如何观察地址的变化？

dispatch({
    type: "CHANGE_ADDRESS",
    payload: {
        city: "Delhi",
        country: "India",
        zip: '22233'
    }
})

---

一个可能的解决方案是，在地址分派的同时，我们可以分派一个变量，在变量发生变化时，我们可以做些什么。但这不是一个完美的解决方案。

只需同时存储：以前的地址和当前的地址

// your-state.js
const initialState = {
  age: 0,
  prevAdress: {
    city: '',
    country: '',
    zip: ''
  },
  currAdress: {
    city: '',
    country: '',
    zip: ''
  },
  ...
}

分派时，在减速机中写入当前值

// your-reducer.js
...
case "CHANGE_ADDRESS":
    return {
        ...state,
        prevAddress: { ...state.currAddress },
        currAddress: { ...action.payload }
    }

然后在效果上进行比较

// your-component.js
...
useEffect(() => {
  if (state.prevAddress.zip !== state.currAddress.zip) { // just an example of comparison
    // doSmthg
  }
}, [state]);
...

更新

如果您只需要比较地址一次，并基于该比较执行某些操作，则只需在分派值之前进行比较：

// your-component.js
...
useEffect(() => {
  const doDispatch = () => dispatch({
        type: "CHANGE_ADDRESS",
        payload: {
          city: "Delhi",
          country: "India",
          zip: newZip,
        },
      });

  if (state.address.zip !== newZip) {
    doSmthgAsPromise().then(() => {     // do something and then dispatch
      doDispatch();
    });
  } else {
    doDispatch();
  }
}, [state, dispatch, doSmthgAsPromise]);

---

这是一个很好的方法。我的问题-如果我们有许多状态变量保存对象值，那么我们应该为每个状态变量都设置prev和current变量吗？你能想到其他方法吗？这取决于你的目的。我认为如果你想在不同的时间点多次比较它们，你必须为每一个都设置上/当前值。如果你只想检查一次，只需在我的更新中查看解决方案我就可以查看你的更新。我看到的唯一缺点是，它最终会出现在许多局部状态变量中，比如newZip，我们必须对它们进行比较。假设我的目的是更新，并且我可以潜在地更新地址对象中的任何内容，就像地址对象一样，如果我有许多其他状态变量（对象类型）…我不确定您的最终目标是什么。React上下文或

useReducer

hook中没有“history”或“changelog”功能。因此，跟踪更改的唯一方法是将它们存储在某个地方。