Redux - Updating deeply nested store props using spread operator

Question

I am building a relatively large web app using react+redux and dealing with my store is getting really confusing.

I came up with a problem in updating nested properties in store and found Immutable Update Patterns section of redux docs which indicates I should do something 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
                }
            }
        }
    }
}

And I've done so, and as a result some parts of my reducers are 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
                  }
                }
              },
            }
          },
        }
      }
.
.
.

I guess you agree that my code is getting more confusing than it should be. My question is not about the performance of the way recommended by redux docs (eventhough it feels like a lot of work for an action which in my case is dispatched almost every second) and I assume it is the best way.

My question is about readability of my code. Is there an approach which can make my reducer cleaner?

Actually I am using react-redux-form for some of my giant forms, not because I need all the features this library is providing, but to use just one feature of it. this library lets me create a huge form model with lots of nested stuff and all I have to do is add its model route to the input to get its predefined onChange events working and the related values updating.

Is this library doing so with spread operator under its hood?

Is there any other way like adding some index to some input and be able to update the related value in the store with that index when input value is changed?

Answer 1

I actually found dozens of utilities for this in redux docs! Immutable Update Utilities

and I think dot-prop-immutable is pretty simple and straight forward.