#reactjs #react-redux
#reactjs #react-redux
Вопрос:
Итак, вот в чем проблема, мне нужны некоторые изменения, которые всегда должны выполняться после каждого действия, кроме одного.Итак, для достижения этой цели я сделал следующее. Есть ли лучший способ добиться этого?
export const reducer = (state, action) => {
switch (action.type) {
case 'AddCheckboxJson': {
return ReducerWrapper({ ...state,objCheckBox:action.payload });
}
case 'insertAt':return ReducerWrapper({
...state,objCheckBox:{...state.objCheckBox,
Values:insertAt(action.payload.index,action.payload.entry,"iDisplayOrder",state.objCheckBox)
}
})
case 'INSERT_ABOVE':
return ReducerWrapper({
...state, objRadio: {
...state.objRadio,
Values: action.payload
}
})
case 'INSERT_BELOVE':
return ReducerWrapper({
...state, objRadio: {
...state.objRadio,
Values: action.payload
}
}),
case 'REPLACE':return { ...action.payload }
default: {
return state;
}
}
};
Здесь функция ReducerWrapper выполняет общую модификацию
export const ReducerWrapper = State => {
return {...State,
//modifications done here
}
}
Комментарии:
1. если все эти модификации являются общими, почему бы не выполнить запуск самой функции?
2. для 1 действия я не хочу, чтобы это произошло. действие замены и значение по умолчанию
3. для этого, наряду с объектом действия, вы можете передать дополнительный bool, чтобы проверить, требуется ли модификация или нет, можете использовать этот bool для условия. или для всех случаев, когда вы хотите выполнить модификацию, сначала подготовьте объект, а затем за пределами switch выполните модификацию с этим объектом.
4. Я думал об этом, но они хотели, чтобы какой-либо код компонента был изменен. Так что я думаю, что в данных обстоятельствах это лучший подход.
5. вы хотите это через все редукторы или только один?
Ответ №1:
Это действительно намного проще, чем может показаться, просто верните для двух сценариев, к которым вы не хотите применять дополнительное состояние, т.е.
export const reducer = (state, action) => {
switch (action.type) {
case 'AddCheckboxJson': {
state = {
...state,
objCheckBox: action.payload
};
}
case 'insertAt': {
state = {
...state,
objCheckBox:{
...state.objCheckBox,
Values: insertAt(
action.payload.index,
action.payload.entry,
"iDisplayOrder",
state.objCheckBox
)
}
}
}
case 'INSERT_ABOVE': {
state = {
...state,
objRadio: {
...state.objRadio,
Values: action.payload
}
}
}
// presumably this should be INSERT_BELOW?
case 'INSERT_BELOVE': {
state = {
...state,
objRadio: {
...state.objRadio,
Values: action.payload
}
}
},
// return the state early in both these scenarios
case 'REPLACE': return { ...action.payload }
default: return state;
}
// run additional state change
return ReducerWrapper(state);
};