复杂Web应用的状态管理.PDF

复杂 WEB 应用的 状态管理 挖了个大坑 我是谁？我在说什么？ 应用规模增大，逻辑愈发复杂 展示逻辑与数据逻辑分离 单独维护的数据逻辑 状态管理 单页应用的数据流方案探索 /xufei/ blog/ issues/47 知乎大 V ，前端网红 重磅力作 有这样一个问题 从前没人讨论状态管理的时候 我们的应用是没有状态的吗？ 应用的状态在组件树的每一个节点里 在 React 的 Component 里 在 Angular 的 Controller 里 在 Vue 的 Component 里 还有一些流落在 service 里，甚至 utils 里 Local State ，也就是 State in Component 不好吗？ Application Application Sidebar Main Navbar UserInfo Products Routes Product Breadcrumb ... Product A Product B ... List View 与 Model 的逻辑分布不等同 状态数据的拓扑关系依赖界面组件的拓扑关系 越做越没法做 那就全部拿出来 彻底解耦 吼啊 ！ - Redux Local state is ne. - Redux 作者 所以不仅要搞 Local / Component State ， Global / Shared State 我们也要搞 那么问题来了 状态管理怎么搞 组合与复用逻辑的能力 Single Source Of Truth 调试与测试 组合与复用逻辑的能力 数据可组合 数据转换逻辑可复用 Single Source Of Truth Single Source Of Truth != Single Store 关键是数据推导的能力 要么只存一份数据，用时计算/推导 要么存在多份数据，但由同一份数据 （自动）推导得到 Flux 是怎么被黑的 调试与测试 Command Query Responsibility Segregation, CQRS Event Sourcing, ES Action/ Message/ Event - Update/ Reduce 利用调用栈 限制 管理副作用 限制 管理副作用 为什么要限制 管理 依赖运行环境 影响运行环境 不可重入、不易验证、不易模拟 如何限制 管理 禁止私下搞事情 Effect as data React: View as data 验证描述行为的数据，并不真的执行 -- UPDATE type Msg Input String | Send | NewMessage String update : Msg - Model - (Model, Cmd Msg) update msg {input, messages} case msg of Input newInput - (Model newInput messages, Cmd.none) Send - (Model messages, WebSocket.send ws:// input) NewMessage str - (Model input (str :: messages), Cmd.none) -- SUBSCRIPTIONS subscriptions : Model - Sub Msg