Как работать с вложенным состоянием в состоянии 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.

На данный момент я остановился на использовании префиксов для основных доменов локального государства.

Другие вопросы по тегам