Redux — обновление глубоко вложенных реквизитов магазина с использованием оператора распространения

Я создаю относительно большое веб-приложение, используя реакцию + редукцию, и работа с моим магазином становится действительно запутанной.

Я столкнулся с проблемой обновления вложенных свойств в магазине и нашел неизменяемые шаблоны обновления раздел документов redux, который указывает, что я должен сделать что-то вроде этого:

function updateVeryNestedField(state, action) {
    return {
        ....state,
        first : {
            ...state.first,
            second : {
                ...state.first.second,
                [action.someId] : {
                    ...state.first.second[action.someId],
                    fourth : action.someValue
                }
            }
        }
    }
}

Я так и сделал, и в результате некоторые части моих редукторов выглядят так:

.
.
.
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
                  }
                }
              },
            }
          },
        }
      }
.
.
.

Думаю, вы согласны с тем, что мой код становится более запутанным, чем должен быть. Мой вопрос не о производительности способа, рекомендованного редукс-документами (хотя это похоже на большую работу для действия, которое в моем случае отправляется почти каждую секунду), и я предполагаю, что это лучший способ.

Мой вопрос касается читаемости моего кода. Есть ли подход, который может сделать мой редуктор чище?

На самом деле я использую react-redux-form для некоторых моих гигантских форм не потому, что Мне нужны все функции, которые предоставляет эта библиотека, но использовать только одну ее функцию. эта библиотека позволяет мне создать огромную модель формы с большим количеством вложенных вещей, и все, что мне нужно сделать, это добавить маршрут ее модели к входным данным, чтобы заставить работать ее предопределенные события onChange и обновлять связанные значения.

Эта библиотека делает это с помощью оператора распространения?

Есть ли другой способ, например, добавить некоторый индекс к некоторому вводу и иметь возможность обновлять соответствующее значение в хранилище с помощью этого индекса при изменении входного значения?


person Taxellool    schedule 04.07.2017    source источник
comment
Похоже, что форма ваших данных просто слишком вложена, чтобы ею можно было удобно манипулировать. Прочтите Нормализация формы состояния в документации по редукции и посмотрите, сможете ли вы преобразовать свое состояние в более удобную форму. redux.js.org/docs/recipes/reducers/NormalizingStateShape.html   -  person David L. Walsh    schedule 04.07.2017
comment
Как сказал @DavidL.Walsh, вы можете рассмотреть возможность нормализации формы вашего состояния. Кроме того, говорят, что ImmutableJS помогает справиться с такими вложенными структурами. Я сам не использовал его. Я все еще думаю, что вы должны сначала нормализовать свое состояние, прежде чем пробовать эту библиотеку.   -  person DonovanM    schedule 04.07.2017
comment
Спасибо за ваши комментарии. Я обязательно пересмотрю форму своего магазина. Я также заметил эти строки: «Очевидно, что каждый слой вложенности затрудняет чтение и дает больше шансов сделать ошибку. Это одна из нескольких причин, по которым вам рекомендуется сохранять сглаженное состояние и как можно больше компилировать редукторы. Думаю, мне нужно разделить некоторые из моих редукторов на несколько редукторов.   -  person Taxellool    schedule 04.07.2017
comment
@DonovanM вау, чувак. этот ImmutableJs потрясающий. идеально подходит для того, что мне нужно. большое спасибо   -  person Taxellool    schedule 04.07.2017
comment
Без проблем. Надеюсь, что это работает для вас!   -  person DonovanM    schedule 04.07.2017


Ответы (1)


На самом деле я нашел десятки утилит для этого в документации по редуксу! Утилиты неизменяемого обновления

и я думаю, что dot-prop-immutable довольно прост и прямолинеен.

person Taxellool    schedule 04.07.2017
comment
Спасибо, что поделились этим списком. Честно говоря, я не смотрел на него с прошлого года, и он точно вырос, ха-ха. - person DonovanM; 04.07.2017
comment
dot-prop-immutable для победы :) - person CharlieBrown; 04.07.2017
comment
Ааааа, вот почему я постоянно обновляю этот список найденными библиотеками :) Рад, что это помогает! - person markerikson; 04.07.2017