我读了大约Flux篇,但example Todo app篇对我来说过于简单,无法理解一些关键点.

想象一下,像Facebook这样的单页应用程序有user profile pages个页面.在每个用户配置文件页面上,我们希望显示一些用户信息和他们最后的帖子,并显示无限滚动.我们可以从一个用户配置文件导航到另一个.

在Flux架构中,这将如何对应于存储和调度程序?

我们会使用每个用户一个PostStore,还是会有某种全球store ?对于dispatchers,我们会 for each "用户页面"创建一个新的Dispatcher,还是使用单例?最后,体系 struct 的哪个部分负责管理"特定于页面"的存储的生命周期,以响应路由更改?

此外,一个伪页面可能有多个相同类型的数据列表.例如,在个人资料页面上,我想显示FollowersFollows.在这种情况下,单身UserStore人如何工作?UserPageStore能管理followedBy: UserStorefollows: UserStore吗?

推荐答案

在Flux应用程序中,应该只有一个调度器.所有数据都流经这个中心枢纽.有了一个单例调度器,它就可以管理所有的store .当您需要Store#1自行更新,然后让Store#2根据操作和Store#1的状态自行更新时,这一点变得非常重要.Flux假设这种情况在大型应用程序中是不可能发生的.理想情况下,这种情况不需要发生,如果可能的话,开发人员应该努力避免这种复杂性.但是单例调度器已经准备好在时机成熟时处理它.

store 也是单身人士.它们应该尽可能保持独立和解耦——一个可以从控制器视图查询的自包含宇宙.进入store 的唯一途径是通过它向调度器注册的回调.唯一的出路是通过getter函数.store 还可以在其状态发生更改时发布事件,以便控制器视图可以知道何时使用getter查询新状态.

在你的示例应用程序中,只有一个PostStore.同一家store 可以管理"页面"(伪页面)上的帖子,该页面更像FB的Newsfeed,帖子出现在不同用户的页面上.它的逻辑域是帖子列表,它可以处理任何帖子列表.当我们从一个伪页面移动到另一个伪页面时,我们希望重新初始化存储的状态以反映新的状态.我们可能还想在localStorage中缓存以前的状态,作为在伪页面之间来回移动的优化,但我倾向于设置一个PageStore,等待所有其他存储,管理伪页面上所有存储与localStorage的关系,然后更新自己的状态.请注意,这PageStore不会存储任何关于帖子的信息——这是PostStore的域.它只需要知道某个特定的伪页面是否被缓存,因为伪页面是它的域.

PostStore人的方法是initialize().此方法将始终清除旧状态,即使这是第一次初始化,然后根据通过操作接收到的数据,通过Dispatcher创建状态.从一个伪页面移动到另一个伪页面可能需要PAGE_UPDATE操作,这将触发initialize()的调用.关于从本地缓存检索数据、从服务器检索数据、乐观渲染和XHR错误状态,有一些细节需要解决,但这是总体思路.

如果一个特定的伪页面不需要应用程序中的所有存储,那么除了内存限制之外,我不完全确定是否有任何理由销毁未使用的存储.但store 通常不会消耗大量内存.只需确保删除要销毁的控制器视图中的事件侦听器.这是在React的componentWillUnmount()方法中完成的.

Reactjs相关问答推荐

使用包装器组件时useState onChange的问题

Firebase删除UserWithEmail AndPassword仅创建匿名用户

URL参数和React路由中的点

sourceBuffer. appendBuffer成功,但h5视频播放器卡住了

cypress 不能点击SPAN

如何用Reaction做交互式的MathML?

为什么我的react虚拟化列表不显示滚动条,除非我确保高度低于rowCount*rowHeight?

生成Reaction Vite应用程序的停靠容器时无法识别环境变量

Google Firestore无法读取图像-react

禁止直接访问Next.js中的页面,同时允许从应用程序内部访问

React:关于useEffect钩子如何工作的困惑

Github 操作失败:发布 NPM 包

如何在React组件中自动更新图表数据?

ReactJS 共享上下文

React 应用程序可以嵌入到 PowerPoint 中吗?

使用 nextjs App Router 在动态客户端进行服务器端渲染

为什么我的 Next.js (React) 组件只有在页面中时才有效?

当用户输入相同信息时如何禁用更新

使用 useRef(uuid()) 的目的是什么?

将 set statehook 函数传递给子路由组件.解构错误