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把他包装后使其变成了一个容器组件

(六)Redux进阶的更多相关文章

  1. github+hexo搭建自己的博客网站(六)进阶配置(搜索引擎收录,优化你的url)

    详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定了域名: http://www.chengxinsong.cn hexo+github博客网站源码(可以clo ...

  2. redux进阶 --- 中间件和异步操作

    你为什么需要异步操作? https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in ...

  3. Redux进阶(一)

    State的不可变化带来的麻烦 在用Redux处理深度复杂的数据时会有一些麻烦.由于js的特性,我们知道当对一个对象进行复制时实际上是复制它的引用,除非你对这个对象进行深度复制.Redux要求你每次你 ...

  4. Redux进阶(像VUEX一样使用Redux)

    更好的阅度体验 前言 redux的问题 方案目标 如何实现 思考 前言 Redux是一个非常实用的状态管理库,对于大多数使用React库的开发者来说,Redux都是会接触到的.在使用Redux享受其带 ...

  5. Redux进阶(Immutable.js)

    更好的阅读体验 更好的阅度体验 Immutable.js Immutable的优势 1. 保证不可变(每次通过Immutable.js操作的对象都会返回一个新的对象) 2. 丰富的API 3. 性能好 ...

  6. Redux 进阶之 react-redux 和 redux-thunk 的应用

    1. react-redux React-Redux 是 Redux 的官方 React 绑定库. React-Redux 能够使你的React组件从Redux store中读取数据,并且向 stor ...

  7. MongoDB学习笔记六:进阶指南

    [数据库命令]『命令的工作原理』MongoDB中的命令其实是作为一种特殊类型的查询来实现的,这些查询针对$cmd集合来执行.runCommand仅仅是接受命令文档,执行等价查询,因此,> db. ...

  8. Redux进阶(Redux背后的Flux)

    简介 Flux是一种搭建WEB客户端的应用架构,更像是一种模式而不是一个框架. 特点 单向数据流 与MVC的比较 1.传统的MVC如下所示(是一个双向数据流模型) 用户触发事件 View通知Contr ...

  9. .NetCore下使用Prometheus实现系统监控和警报 (六)进阶Grafana集成自定义收集指标

    Prometheus中包含了很多收集指标,那么我们怎来在Grafana中来使用呢? 接下来我们还是以之前自定义的来演示如图:我们在Prometheus中已经可以看到这个之前我们自定义的类型了 关于Gr ...

随机推荐

  1. 【转】javascript 小数乘法结果错误处理

    一.用js计算 12.32 * 7  结果是多少? 答案:86.24000000000001   为什么会出现这种问题?怎么解决? js在处理小数的乘除法的时候有一个bug,解决的方法可以是:将小数变 ...

  2. Python介绍与学习

    Python是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年. Python是纯粹的自由软件, 源代码和解释器CPy ...

  3. Pyhton学习——Day23

    #re模块方法:findall search#findall:返回所有满足匹配条件的数值,放在列表里#search : #函数会在字符串内查找模式匹配,只到找到第一个匹配然后返回一个包含匹配信息的对象 ...

  4. java web 初尝遇到的坑

    1. 配置 tomcat 7 + Dynamic web model version 3 发现写 web.xml 导致 tomcat 不能启动. 解决办法:tomcat 7 之后有两种配置 servl ...

  5. Jetty初探

    一.在jetty中部署web应用 Jetty 和 Tomcat 一样都是一个web server的container, 用户可以在里面 deploy 自己的 war 包,然后启动 Jetty, 进而通 ...

  6. Java获取当天、本周、本月、本季度、本年等 开始及结束时间

    package com.zhaochao.utils; import java.text.SimpleDateFormat; import java.util.Calendar; import jav ...

  7. S3C6410 LCD Overlay Test Program

    测试了一下S3C6410 LCD控制器提供的Overlay功能,写了一个简单的test,主要用于实现FB0和FB1之间的Overlay操作.内核选项的Windows至少要为2. 具体支持如下操作:1 ...

  8. Python学习笔记(7)字典

    2019-03-07 字典(dict): (1)字典用大括号({})定义,字典由多个键及其对应的值组合而成,每一对键值组合称为项. (2)字典的键唯一,但是值可以是任何(不可变的)数据类型(整型,字符 ...

  9. git与github的连接流程

    https://blog.csdn.net/sssssuuuuu666/article/details/78565381 https://www.cnblogs.com/wzd5230/p/49064 ...

  10. ASP.NET-HTTP管道模型

    HTTP管道模型处理WEB程序很小的一方面.管道模型是类似于Web Services的一种在服务器端处理ASP.NET页面的框架技术 一.管道对象模型 在System.Web的命名空间中处理HTTP的 ...