我想合并两个化简器,第一个化简器是作为通用化简器创建的,第二个化简器是针对其自身状态的。这两个减速器将无法处理相同的情况。合并这些操作只会导致重复默认情况,无论如何,默认情况总是会返回默认状态。这将有所帮助,因为我只对通用类进行一次测试。
如果您正在考虑使用reduceReducers
或combineReducers
,那是行不通的,因为我有许多“特殊”减速器,每个减速器都具有相同的动作类型,所有这些减速器可以修改状态的另一部分。
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中隔离以下情况:INITIALIZE
和RESET
,所以我只需要测试一次这些情况,而不必在每个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)
答案 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;
}
}