React context dispatch 状态改变后如何处理

Question

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

要更改状态并执行更改后的操作，可以按以下方式处理。例如 - 我在组件“联系人”中。在这里面，我在一个变量 age 上发送一个状态变化，它是一个如下给出的数字 -

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

并在减速器中捕获调度，如下所示

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

要在'Contact'组件中做一些年龄变化后，我们可以使用'useEffect'来观察'age'的变化

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

问题是 - 如果我们不得不改变一个处于状态的对象，也就是说，我们必须改变地址，而不是改变年龄，就像下面给出的那样，我们必须在地址改变后做一些事情。

我们如何观察地址变化？

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

一个可能的解决方案 - 除了地址分派之外，我们还可以分派一个变量，我们可以根据它的变化来做一些事情。但这不是一个完美的解决方案。

Answer 1

只存储前一个地址和当前地址

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

当你派发时，把当前写在reducer中

// 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]);