Question

我有两个缩减器form1和form2。我还有一个选择器＆＃39;确定两个表单是否都已完成getAreFormsComplete。

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

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

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

如何在选择器中将先前状态与新状态进行比较，然后在reducers中更新某些状态？

selector.js

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

Answer 1

所以我认为你需要多做一些阅读..检查formstate是否已经改变应该在你的组件中，正确的地方是componentWillReceiveProps。只有选择状态as is才能关注您的选择器。使用redux connect hoc将此状态连接到组件。您的组件会收到新道具，componentWillReceiveProps可让您将当前道具（this.props）与参数nextProps进行比较。

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

你不应该绕过商店（除非你不想因为某种原因使用react-redux）。

Answer 2

store.subscribe是redux和selector解决方案的关键，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
}

如何在选择器中比较先前状态和新状态

2 个答案: