盒子
盒子
文章目录
  1. 1、服务端返回的数据
  2. 2、缓存数据
  3. 3、客户端产生,待提交到服务端的数据
  4. 4、UI数据,如路由,轮播器,分页页数
  5. 1、store:纯JavaScript对象,存在内存中,保存所有app的数据,并且没有setter
  6. 2、action:描述页面发生的变化,也是一个JavaScript对象,有一个type属性
  7. 3、reducer:连接state和action的纯方法,(state, action) => state,一个app通常拆分成多个reducer
  8. 1、数据源唯一:整个app的快照都保存在一个JavaScript对象树里面
  9. 2、store里面的state只能通过dispatch一个action进行改变(通过reducer计算)
  10. 3、基于action描述改变state,需要通过纯的reducer?

redux系统学习一

动机:

一般页面包含有4种数据:

1、服务端返回的数据

2、缓存数据

3、客户端产生,待提交到服务端的数据

4、UI数据,如路由,轮播器,分页页数

页面数据可以相互影响,变得无法跟踪,因此需要redux

核心概念:

1、store:纯JavaScript对象,存在内存中,保存所有app的数据,并且没有setter

2、action:描述页面发生的变化,也是一个JavaScript对象,有一个type属性

3、reducer:连接state和action的纯方法,(state, action) => state,一个app通常拆分成多个reducer

三大原则:

1、数据源唯一:整个app的快照都保存在一个JavaScript对象树里面

2、store里面的state只能通过dispatch一个action进行改变(通过reducer计算)

3、基于action描述改变state,需要通过纯的reducer?

如何处理副作用:
基于reducer只能是一个纯函数,不能有副作用(网络请求、硬盘读取、页面渲染),一个输入只能得到一个输出,因此副作用不能卸载reducer里头,那么副作用只能写在未dispatch action之前,并且在回调里面(得到副作用结果)再dispatch。
1、不用中间件:直接写在页面,回想react,只用redux,不用redux-thunk,一般在请求完数据(componentDidMount)的回调里面调用dispatch。
2、使用中间件redux-thunk,由于view应该只作为展示层,副作用一般包含了业务层,如请求数据,因此副作用不应该写在view里面,通过中间件redux-thunk,可以写在创建action的时候(actionCreator),(dispatch, getState) => { / do something effect / dispatch(action) }。现在看来,view层不用写副作用啦,dispatch的入参可以是一个方法(actionCreator),副作用写在这个方法里面就可以了,在再副作用的回调(promise,async await)里面进行正常过的dispatch即可。

支持一下
扫一扫,支持 Alin
  • 微信扫一扫
  • 支付宝扫一扫