1

我有一个反应版本 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'
    }
})

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

4

1 回答 1

1

只需存储两个：以前的地址和当前地址

// 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]);
于 2020-06-25T07:13:49.250 回答