Sor*_*ren 12 apollo react-apollo apollo-client apollo-link-state
如果我们看一下todos示例,假设应用程序有多个视图(TodoList页面和另一个页面).
因此,不是直接引用todo项的数组的"todos",而是在状态/存储/缓存的顶层,它实际上只是具有某些自身状态的视图.
在该视图中,我们定义了待办事项列表和可见性过滤器 - 因此状态/存储/缓存不会如下所示:
{
todos: [TodoItem]
0:?TodoItem:0
completed: false
id: 0
text: "hh"
visibilityFilter: "SHOW_ALL"
}
Run Code Online (Sandbox Code Playgroud)
但是:
{
scenes: {
TodoList: {
todos: [TodoItem]
0:?TodoItem:0
completed: false
id: 0
text: "hh"
visibilityFilter: "SHOW_ALL"
},
SomeOtherView: { /* other state */}
}
}
Run Code Online (Sandbox Code Playgroud)
它甚至可能被孤立在它自己的数据"模块"中,就像这里提出的那样: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 */}
}
}
Run Code Online (Sandbox Code Playgroud)
应用程序范围的状态将进一步存储一个级别:
{
// 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 */}
}
}
Run Code Online (Sandbox Code Playgroud)
我们可以使用Redux中的reducer组合轻松实现这一点,如下所示:
从内部开始:todos将有自己的减速器,它在数据减速器中组合,在TodoList减速器中与关键的"数据"结合使用.然后,TodoList简化器将再次组合在场景缩减器中,依此类推,直到顶部,以使嵌套状态反映项目的文件夹结构.
但是如果没有在单个"TodoList"解析器中定义所有东西,那么apollo-link-state和resolvers怎么可能这样呢?
附加问题:
一旦你离开,你将如何清除TodoList状态?在Redux中,我猜你会触发一个清除状态给定切片的动作.
PS
stackoverflow中缺少"apollo-link-state"和"apollo-link"标记.也许拥有代表> 1500的人可以添加那些?
归档时间: |
|
查看次数: |
1425 次 |
最近记录: |