是否可以将两个异径管合并为一个?

时间:2019-08-10 16:52:55

标签: javascript redux react-redux

我想合并两个化简器,第一个化简器是作为通用化简器创建的,第二个化简器是针对其自身状态的。这两个减速器将无法处理相同的情况。合并这些操作只会导致重复默认情况,无论如何,默认情况总是会返回默认状态。这将有所帮助,因为我只对通用类进行一次测试。

如果您正在考虑使用reduceReducerscombineReducers,那是行不通的,因为我有许多“特殊”减速器,每个减速器都具有相同的动作类型,所有这些减速器可以修改状态的另一部分。

const initialState = {
  byId : {},
  ids: []
}

const dogsReducer = ({ dogs: state = initialState, ...restOfState }, action) => {
  switch (action.type) {
    case INITIALIZE:
      return {
        byId : _.keyBy(state.dogs, 'id'),
        ids: state.map(({id}) => id)
      }
    case RESET:
      return initialState
    case SPECIFIC_DOG_ACTION:
      ...
    default:
      return state
  }
}

const catsReducer = ({ cats: state = initialState, ...restOfState}, action) => {
  switch (action.type) {
    case INITIALIZE:
      return {
        byId : _.keyBy(state, 'id'),
        ids: state.map(({id}) => id)
      }
    case RESET:
      return initialState
    case SPECIFIC_CAT_ACTION:
      ...
    default:
      return state
  }
}

我想在通用的switch / case函数或通用的reducer中隔离以下情况:INITIALIZERESET,所以我只需要测试一次这些情况,而不必在每个reducer中进行测试。将来会有更多的通用案例,这就是为什么我要避免重复。

这是预期的结果:

const genericReducer = (state = initialState, action) => {
  switch (action.type) {
    case INITIALIZE:
      return {
        byId : _.keyBy(state.dogs, 'id'),
        ids: state.map(({id}) => id)
      }
    case RESET:
      return initialState
    default:
      return state
   }
}

const dogsReducer = ({ dogs: state = initialState, ...restOfState }, action) => {
  switch (action.type) {
    case SPECIFIC_DOG_ACTION:
      ...
    default:
      return state
  }
}

const catsReducer = ({ cats: state = initialState, ...restOfState}, action) => {
  switch (action.type) {
    case SPECIFIC_CAT_ACTION:
      ...
    default:
      return state
  }
}

const finalCatsReducer = mergeReducers(catsReducer, genericReducer)
const finalDogsReducer = mergeReducers(dogsReducer, genericReducer)

2 个答案:

答案 0 :(得分:0)

我可以想象使用以下内容,但是我想说这与将它们全部放平会产生相似的效果。我唯一看到的好处是,除非常规案例失败,否则将无法验证特定的切换案例。

const genericSwitch = type => {
  switch (type) {
    case 1:
      do something x

    default: //specificSwitch
      switch (type) {
        case 2:
          do something y
      default:
          return z
      }
  }
}

答案 1 :(得分:0)

最简单的解决方案是包装到上层方法中:

  #gauge {
  fill: red;
}

.Animate-Draw {
  fill-opacity: 0;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-name: FillIn;
  animation-duration: 4s 0.5s;
  /* animation-delay: .5s; */
}
.Animate-Draw:nth-child(1) {
  animation-delay: 0.5s;
}
.Animate-Draw:nth-child(2) {
  animation-delay: 1s;
}
.Animate-Draw:nth-child(3) {
  animation-delay: 1.5s;
}
.Animate-Draw:nth-child(4) {
  animation-delay: 2s;
}
.Animate-Draw:nth-child(5) {
  animation-delay: 2.5s;
}
.Animate-Draw:nth-child(6) {
  animation-delay: 3s;
}
.Animate-Draw:nth-child(7) {
  animation-delay: 3.5s;
}
.Animate-Draw:nth-child(8) {
  animation-delay: 4s;
}

@keyframes FillIn {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}