Как работать с вложенным состоянием в состоянии apollo-link-state (аналогично RedRux combReducers)
Если мы посмотрим на пример задач, представим, что у приложения было несколько представлений (страница TodoList и другая страница).
Таким образом, вместо "задач", непосредственно ссылающихся на массив элементов задач, на верхнем уровне состояния / хранилища / кэша это фактически будет просто представление с некоторым собственным состоянием.
Внутри этого представления мы определяем список элементов todo и фильтр видимости - поэтому состояние / store / cache НЕ будет выглядеть так:
{
todos: [TodoItem]
0:▾TodoItem:0
completed: false
id: 0
text: "hh"
visibilityFilter: "SHOW_ALL"
}
но, как:
{
scenes: {
TodoList: {
todos: [TodoItem]
0:▾TodoItem:0
completed: false
id: 0
text: "hh"
visibilityFilter: "SHOW_ALL"
},
SomeOtherView: { /* other state */}
}
}
Он может быть даже изолирован в своем собственном "модуле данных", как это было предложено здесь: https://medium.com/@alexmngn/how-to-use-redux-on-highly-scalable-javascript-applications-4e4b8cb5ef38:
{
scenes: {
TodoList: {
data: {
todos: [TodoItem]
0:▾TodoItem:0
completed: false
id: 0
text: "hh"
}
visibilityFilter: "SHOW_ALL"
},
SomeOtherView: { /* other state */}
}
}
Состояние всего приложения будет хранить уровень дальше:
{
// App global state lives as long as the app
data: { /* App global relevant data */},
someglobalstate: true,
scenes: {
TodoList: { // "view state" lives as long as the view is active, and resets when navigated away from
data: {
todos: [TodoItem]
0:▾TodoItem:0
completed: false
id: 0
text: "migrate from redux to apollo-link-state"
}
visibilityFilter: "SHOW_ALL"
},
SomeOtherView: { /* other state */}
}
}
Мы можем легко добиться этого с помощью композиции редуктора в Redux, например:
Начиная изнутри: задачи должны иметь собственный редуктор, который объединяется в редукторе данных, который объединяется в редукторе TodoList с ключом "данные". Затем редуктор TodoList снова будет объединен в редукторе сцен и так далее до самого верха, чтобы вложенное состояние отражало структуру папок проекта.
Но как такое возможно с apollo-link-state и обработчиками, не определяя все в одном преобразователе "TodoList"?
Дополнительный вопрос:
Как бы вы очистили состояние TodoList, когда уйдете? Я полагаю, что в Redux вы вызовете действия, которые очистят данный фрагмент состояния.
PS
Тэги "apollo-link-state" и "apollo-link" отсутствуют в stackru. Может быть, кто-то с репутацией> 1500 мог бы добавить их?
1 ответ
У меня такой же вопрос. Кажется, что apollo-link-state
ожидайте функцию на верхнем уровне преобразователя, поэтому невозможно создать вложенные структуры, как это было бы в хранилище Redux.
Как говорится во вступительном посте, ожидается, что apollo-link-state
будет управлять только примерно 20% состояния, остальные будут получать данные с сервера GraphQL. Поэтому разделение локального состояния может не иметь смысла, поскольку имеет смысл разделять хранилище Redux.
На данный момент я остановился на использовании префиксов для основных доменов локального государства.