1 UI组件与容器组件的拆分
UI组件(傻瓜组件):只负责页面显示,没有任何逻辑
容器组件(聪明组件):并不去管UI到底长成什么样,关注的是整个业务逻辑
2 无状态组件
一个普通的函数就是无状态组件 开销比较低
而class..extends..要执行一些生命周期函数
结论:当定义一个UI组件 没有逻辑操作的时候一般使用无状态组件。
3 Redux中 发送异步请求获取数据
4 使用Redux-thunk中间件进行ajax请求发送
Redux-thunk可以把复杂的异步请求逻辑放到action里处理 而不是都写到组件里。
这时action已经不是一个对象了,可以是一个函数
而且函数返回的第一参数是dispatch
5 到底什么是redux的中间件
redux中间件的中间指的是action和store之间
以前action只能是一个对象,派发给store
现在使用了redux-thunk后 action可以是一个函数
实际上的中间件就是对dispatch的一个升级和封装
最原始的就是把对象传递给store,现在使用redux-thunk后
调用dispatch方法,如果传入的是一个对象,那和之前一样,
假设传入的是一个函数, 会让你函数先执行,执行完的时候,需要调用store时候再去调用
市场上的两种中间件:
redux-thunk是把异步请求放到action里面
redux-sage是把异步请求放到单独的文件里面去处理
6 Redux-saga中间件的使用
把异步逻辑拆分到saga里面去。
8 react-redux的使用
这个包帮助我们在react中更加方便的使用redux
1.Provider
这个组件之下所有的组件都有store了
在子组件中,之前:
之后:
(让组件和store做连接)
再进一步:
口诀:
connect是连接 TodoList和store做连接,通过mapStateToProps这个映射关系
再进异步:
Provider 提供器
然后通过connect方法做连接
10 使用React-redux完成TodoList功能
todolist是一个UI组件
但是connect把他包装后使其变成了一个容器组件