美文网首页
Redux 与 传统 Flux 的请求对比(未完成)

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

作者: 郝翔 | 来源:发表于2016-07-18 07:54 被阅读251次

    传统的 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 展示

    相关文章

      网友评论

          本文标题:Redux 与 传统 Flux 的请求对比(未完成)

          本文链接:https://www.haomeiwen.com/subject/zguqjttx.html