javascript - 通过多个 Action 类型来约束 reducer

Question

我在多个页面上有复选框过滤器，并希望它们在商店的不同部分保持独立。创建非常具体的操作类型，例如 TOGGLE_CHECKBOX_SEARCHPAGE_BODYTYPE 感觉是错误的，因为它需要为每个页面和每个过滤器类型指定特定的 reducer ，或者在一个大型 reducer 内进行大量检查。所以我认为行动应该是这样的:

{
  type: 'TOGGLE_CHECKBOX',
  page: 'search',
  filterName: 'bodyType',
  payload: 'xxxl'
}

然后我可以编写返回约束 reducer 的函数:

function constrain(constraints, reducer) {
  return function(state, action) {
    const allConstraintsPass = Object.getOwnPropertyNames(constraints)
      .every( propName => action[propName] === constraints[propName])

    if ( ! allConstraintsPass ) {
      return reducer(state, {}) // possibly never matching {type: NaN}
    }

    return reducer(state, action)
  }
}

并像这样使用它:

function someReducer(state, action) {
  state = state || {}
  switch (action.type) {
    case 'TOGGLE_CHECKBOX':
      return Object.assign({}, state, {[action.payload]: !state[action.payload]})
    default:
      return state
  }
}

const fuelOnSearchPage = constrain({filterName: 'bodyType', page: 'search'}, someReducer)

console.log(fuelOnSearchPage(undefined, {filterName: 'fuelType', page: 'search', type: 'TOGGLE_CHECKBOX', payload: 'xxl'}));
console.log(fuelOnSearchPage(undefined, {filterName: 'bodyType', page: 'search', type: 'TOGGLE_CHECKBOX', payload: 'xs'}));
console.log(fuelOnSearchPage(undefined, {filterName: 'bodyType', page: 'search', type: 'TOGGLE_CHECKBOX', payload: 'xxl'}));
console.log(fuelOnSearchPage(undefined, {filterName: 'fuelType', page: 'search', type: 'OTHER_ACTION', payload: 'xxl'}));
console.log(fuelOnSearchPage(undefined, {type: 'OTHER_ACTION'}));

不过，我不确定这是否是惯用的 redux。在这种情况下，filterName 和 page 似乎与类型有类似的用途，在某些情况下可能不清楚应该是什么类型。对于此类问题您有更明确的解决方案吗？

Answer 1

创建非常具体的操作类型并没有错，因为操作非常具体。您在示例中做了完全相同的事情，只是看起来更复杂并且更难测试(并且它不遵循强烈推荐的 FSA 标准)。我通常像这样命名我的操作类型:

export const SEARCH = {
    BODYTYPE: {
        TOGGLE: 'SEARCH.BODYTYPE.TOGGLE'
    }
}

然后用作:SEARCH.BODYTYPE.TOGGLE 或types.SEARCH.BODYTYPE.TOGGLE，具体取决于您导入的方式。

您可以基于前缀创建 reducer ，而不是该约束函数，例如:

createCheckboxReducer(prefix) {
    return function(state, action) {
        switch(action.type) {
            case `${prefix}.TOGGLE`:
                //do something
                return state;
        }
    }
}

// somewhere else
createCheckboxReducer('SEARCH.BODYTYPE')

几乎是同样的事情，但这在我的书中绝对是犹太洁食。旁注:如果我的操作类型嵌套得比这个示例更深，这通常表明是时候重构并将其分解为更小的模块了。

注意:这都是未经测试的代码