【问题标题】:How to deal with nested state in apollo-link-state (similar to Redux's combineReducers)如何处理 apollo-link-state 中的嵌套状态(类似于 Redux 的 combineReducers)
【发布时间】:2018-06-12 09:06:48
【问题描述】:

如果我们查看todos example,想象应用程序有多个视图(一个 TodoList 页面和另一个页面)。

因此,“todos”不是直接指代待办事项数组,而是在状态/存储/缓存的顶层,它实际上只是一个具有自己状态的视图。

在该视图中,我们将定义待办事项列表和可见性过滤器 - 所以状态/存储/缓存不会像这样:

{
  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 中的 reducer 组合轻松实现这一点,如下所示:

从内部开始:todos 会有自己的 reducer,它结合在 data reducer 中,它在 TodoList reducer 中与键“data”结合。 TodoList reducer 将再次组合到场景 reducer 等中直到顶部,以使嵌套状态反映项目的文件夹结构。

但是如果没有在单个“TodoList”解析器中定义所有内容,如何使用 apollo-link-state 和解析器来实现这样的事情呢?

补充问题:

离开后如何清除 TodoList 状态?在 Redux 中,我猜你会触发一个动作来清除给定的状态片段。

附言

"apollo-link-state" & "apollo-link" 标签在 stackoverflow 中丢失。也许代表 > 1500 的人可以添加这些?

【问题讨论】:

    标签: apollo react-apollo apollo-client apollo-link-state


    【解决方案1】:

    我也有同样的问题。似乎apollo-link-state 期望在解析器的顶层有一个函数,因此无法像在 Redux 存储中那样创建嵌套结构。

    正如introduction post 所说,预计apollo-link-state 将只管理大约 20% 的状态,其余部分从 GraphQL 服务器获取数据。因此,像拆分 Redux 存储一样多地拆分本地状态可能没有意义。

    目前,我已决定为当地州的主要域使用前缀。

    【讨论】:

    • 我决定接受你的回答,因为我没有得到阿波罗开发者的官方回复。结果我最终使用了 mobx-state-tree,我强烈推荐!
    猜你喜欢
    • 2019-02-13
    • 2022-07-13
    • 2019-03-31
    • 2019-06-30
    • 1970-01-01
    • 1970-01-01
    • 2018-06-08
    • 2020-12-20
    • 2017-09-18
    相关资源
    最近更新 更多