Я создаю относительно большое веб-приложение, используя реакцию + редукцию, и работа с моим магазином становится действительно запутанной.
Я столкнулся с проблемой обновления вложенных свойств в магазине и нашел неизменяемые шаблоны обновления раздел документов 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 и обновлять связанные значения.
Эта библиотека делает это с помощью оператора распространения?
Есть ли другой способ, например, добавить некоторый индекс к некоторому вводу и иметь возможность обновлять соответствующее значение в хранилище с помощью этого индекса при изменении входного значения?