传统的 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 展示
网友评论