如何比较选择器中的先前状态与新状态

Question

我有两个减速器，form1 和 form2。我还有一个 'selector' 来确定两个表格是否都已完成，getAreFormsComplete。

getAreFormsComplete 的状态将开始为 false，在 form1 和 form2 完成后将变为 true。如果用户从任一表单中删除数据并且我想观察该特定更改，则状态可能会返回 false。

我需要在 getAreFormsComplete 的值从 true 变为 false（而不是从 false 变为 true）时执行一个操作。

我将如何在 Redux 中执行此操作。我可能需要 getAreFormsComplete 的先前状态。

我如何在选择器中比较以前的状态和新状态，然后在我的 reducer 中更新某些状态（如果它发生变化）？

selector.js

export const getAreFormsComplete = ({form1, form2}) => {
    return form1.field1.length > 0
        && form2.field1.length > 0
}

Answer 1

store.subscribe 是 redux 和选择器解决方案的关键，currentAreFormsComplete 变量是之前的状态，我将它与商店进行比较

function observeAreFormsComplete(store) {
  let currentAreFormsComplete 

  function handleChange() {
    let nextAreFormsComplete = selectors.getAreFormsComplete(store.getState())

    if (nextAreFormsComplete !== currentAreFormsComplete
      && store.getState().ui.formsUncompleted == false) {
      if (nextAreFormsComplete === false
        && currentAreFormsComplete === true) {
        store.dispatch(formsUncompleted())
      }
    }

    currentAreFormsComplete = nextAreFormsComplete
  }

  let unsubscribe = store.subscribe(handleChange)
  return unsubscribe
}

Answer 2

所以我认为你需要多读一些书。检查表单状态是否改变应该在你的组件中，正确的地方是componentWillReceiveProps。您的选择器应该只关注选择状态 as is。您使用 redux connect hoc 将此状态连接到您的组件。您的组件接收新的道具，并且 componentWillReceiveProps 允许您将当前道具 (this.props) 与参数 nextProps 进行比较。

对于使用 redux 处理的表单，有许多库可以帮助您管理状态（我自己使用 redux-form）

你不应该在商店里走来走去（除非你出于任何原因不想使用 react-redux）。

如何比较选择器中的先前状态与新状态

How to compare previous state with new state in a selector

reactjs

redux

react-redux

reselect