Redux 与 传统 Flux 的请求对比(未完成)

传统的 flux

loader 的设置

flux 是各个组件单独管理自己的 state,这意味着 loader 不必通过 store 来设置,直接通过组件内部的 state 变化即可。

组件未 render 的情况

先看仍然没有发起数据请求,组件还没有 render 的情况,

  • 先将 state 中的 loading 预设为 true,页面进来之后,就是 loading 状态,加载 loader组件,加载其他组件

  • 页面第一次 render 结束,在 didmount 中监听 store ,之后发起 action,带上 url,在 action 发起的时候,发现有 url,就先去拉取数据,异步请求结束后,更新 store

  • store 产生了变化,组件收到响应,setState

  • 再考虑组件存在的情况,此时已经 didmout 过,就不会再执行了,点击某个按钮,先通过 setstate 显示 loader,之后监听、发送对应的 action,ui 发生改变。

redux

redux 请求一个异步 api 时有两个关键点,一个时间点是在你开始执行的时候,一个是接受到响应时。
每当遇到这种时刻,通常可以改变应用的 state。
发起一个正常的 action,reducer 会响应这个action。
对于任何一个 api 请求,你需要发起三种不同的 action。
一个 action 通知 reducer 发起请求
reducers 可能会通过切换 state 中的 isFetching,ui 层通过会显示一些类似 loader 的组件。
action 通知 reducer 请求成功
reducer 通过合并新的数据到 state 中,重设 isFetching,UI 层可能会隐藏 loader 组件,显示下载的数据。
action 通知 reducer 请求失败
reducer 重设 isfetching,除此之外,一些 reducer 可能会存储错误信息供 UI 展示

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容