美文网首页
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 的请求对比(未完成)

    传统的 flux loader 的设置 在 flux 是各个组件单独管理自己的 state,这意味着 loader...

  • 2021-04-14 redux

    Redux 将flux与函数式编程结合在一起, 对于flux的系统架构的实现 Redux使用场景- 简单来说, 如...

  • 03|从Flux到Redux

    单向数据流始祖 Flux Flux理念的一个更强实现Redux 结合React和Redux 01|Flux 从Fl...

  • Redux - lewisbook

    Redux = Reducer + Flux 1、Redux的工作流程(Redux Flow) redux-flo...

  • 深入浅出React和Redux学习笔记(三)

    从Flux到Redux Redux管理应用状态的框架: 单向数据流的始祖Flux; Flux理念的一个更强实现Re...

  • Redux

    Redux = Reducer + Flux Redux示例 ./store/index.js ./redux/t...

  • Flux与Redux

    一. Flux 1. 概念 flux是一套前端应用架构模式,核心是单向数据流 注:flux不是具体的代码实现 2....

  • Redux

    Redux 简介 Redux = Reducer + Flux Redux 的工作流程 使用antd编写Todo...

  • 从Flux到Redux

    单向数据流框架的始祖FluxFlux理念的一个更强实现Redux结合React和Redux 认识Flux flux...

  • redux之理解与使用

    1 redux认识Redux 由 Flux 演变而来,但受 Elm的启发,避开了 Flux 的复杂性。 不管你有没...

网友评论

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

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