reactjs - Redux中的验证处理

考虑这样的reduce(我正在使用redux-action库)

export const reducer = handleActions({
  [REMOVE_CATEGORY]: (state, action) => ({
    ...state,
    // Do other stuff...
  }),
  [TOGGLE_CATEGORY]: (state, action) => {
    const category = action.payload.category
    const selectedCategory = _.findWhere(state.categories, {name: category.name})
    const activeCategories = _.filter(state.categories, {active: true})

    if (activeCategories.length < 4 && selectedCategory.active === true) {
      return {
        ...state,
        didToggleFail: true
      }
    }

    return {
      didToggleFail: false,
      isRequesting: false,
      categories: state.categories.map(
        category => category.name === action.payload.category.name ? {...category, active: !category.active} : category
      )
    }
  },
  [OTHER_ACTION]: (state,action) => ({
    ...state,
    // Do other stuff..
  })
})

我发现自己面临一个简单的问题，这可能是由于我对解决方案的不良态度所致；

reducer 中的每个action基本上都会传播先前存在的状态，但是有一个字段didToggleFail是根据各种条件设置的。

现在我的问题是:我用于同步验证的didToggleFail将永远处于我的状态，直到未设置为止。

我在这样的didToggleFail中使用componentDidUpdate:

componentDidUpdate() {
if(this.props.reducer.didToggleFail)
   showError()
}
...

如您所见，我的问题是，如果我调度其他操作并且该字段仍设置为true，它将始终触发错误。

应该如何处理这种情况？

最佳答案

我猜显示错误后，将为用户提供一个关闭错误的选项(或在超时后自动关闭)。此时，请调度另一个UNSET_TOGGLE_FAIL以将didToggleFail设置为false。这应该防止多个触发器。

但是，最佳解决方案取决于showError()的功能。是渲染方法还是其他redux Action 调度。如果是纯渲染，我建议在组件的render中移动，因为每次重新渲染后componentDidUpdate都会被调用，并且如果您不取消设置didToggleFail，则可能会导致循环。