1 UI组件与容器组件的拆分

UI组件(傻瓜组件):只负责页面显示,没有任何逻辑

容器组件(聪明组件):并不去管UI到底长成什么样,关注的是整个业务逻辑

2 无状态组件

一个普通的函数就是无状态组件 开销比较低

而class..extends..要执行一些生命周期函数

结论:当定义一个UI组件 没有逻辑操作的时候一般使用无状态组件。

3 Redux中 发送异步请求获取数据

4 使用Redux-thunk中间件进行ajax请求发送

Redux-thunk可以把复杂的异步请求逻辑放到action里处理 而不是都写到组件里。

(六)Redux进阶-LMLPHP

这时action已经不是一个对象了,可以是一个函数

(六)Redux进阶-LMLPHP

而且函数返回的第一参数是dispatch

5 到底什么是redux的中间件

(六)Redux进阶-LMLPHP

redux中间件的中间指的是action和store之间

以前action只能是一个对象,派发给store

现在使用了redux-thunk后 action可以是一个函数

实际上的中间件就是对dispatch的一个升级和封装

最原始的就是把对象传递给store,现在使用redux-thunk后

调用dispatch方法,如果传入的是一个对象,那和之前一样,

假设传入的是一个函数, 会让你函数先执行,执行完的时候,需要调用store时候再去调用

市场上的两种中间件:

redux-thunk是把异步请求放到action里面

redux-sage是把异步请求放到单独的文件里面去处理

6 Redux-saga中间件的使用

(六)Redux进阶-LMLPHP

把异步逻辑拆分到saga里面去。

8 react-redux的使用

这个包帮助我们在react中更加方便的使用redux

1.Provider

(六)Redux进阶-LMLPHP

这个组件之下所有的组件都有store了

在子组件中,之前:

(六)Redux进阶-LMLPHP

之后:

(六)Redux进阶-LMLPHP

(让组件和store做连接)

再进一步:

(六)Redux进阶-LMLPHP

口诀:

connect是连接 TodoList和store做连接,通过mapStateToProps这个映射关系

再进异步:

(六)Redux进阶-LMLPHP

(六)Redux进阶-LMLPHP

Provider 提供器

然后通过connect方法做连接

10 使用React-redux完成TodoList功能

todolist是一个UI组件

(六)Redux进阶-LMLPHP

但是connect把他包装后使其变成了一个容器组件

05-26 13:11