As I develop a large web application using react+redux, managing my store has become quite complex.
I encountered an issue with updating nested properties in the store and came across the Immutable Update Patterns section of the redux documentation. It suggests a method like this:
function updateVeryNestedField(state, action) {
return {
....state,
first : {
...state.first,
second : {
...state.first.second,
[action.someId] : {
...state.first.second[action.someId],
fourth : action.someValue
}
}
}
}
}
Implementing this approach has led to some sections of my reducers looking like this:
.
.
.
case "CHANGE_RANGED_INPUT": {
return {
...state,
searchPanel: {
...state.searchPanel,
[action.payload.category]: {
...state.searchPanel[action.payload.category],
rangedInputs: {
...state.searchPanel[action.payload.category].rangedInputs,
[action.payload.type]: {
...state.searchPanel[action.payload.category].rangedInputs[action.payload.type],
[action.payload.key]: {
...state.searchPanel[action.payload.category].rangedInputs[action.payload.type][action.payload.key],
value: action.payload.value
}
}
},
}
},
}
}
.
.
.
The complexity of my code is becoming overwhelming. My concern is not about the performance, although it seems like a lot of work for an action that is dispatched frequently. I assume it's the recommended way according to redux docs.
My query pertains to the readability of my code. Is there an alternative approach that can streamline my reducer?
I've integrated react-redux-form for some extensive forms, not necessarily for all its features, but for one specific functionality. This library allows me to easily manage a detailed form model with nested components, simply by adding its model route to the input to trigger predefined onChange events and update values accordingly.
Does this library utilize the spread operator internally?
Is there another method, such as assigning an index to an input, that could simplify updating related values in the store when the input's value changes?