redux 的使用方法,

  

  为什么使用 action.js 文件,进行优化代码将其分开,然后我们通过工厂函数的每次返回不同的对象,由于参数是固定的,每次返回的都是事件类型和事件数据,所以我们可以使用一个函数,通过其返回值来返回一个对象,让后传递给 action ;

  我们的 reducer 函数有两个参数,参数一:state,参数二:action,

  我们的 redux 中有一个 createStore() 的函数,参数是 reducer 函数,并且有一个返回值,就是 store,管理 redux 的 state 的数据;

  如果我们向渲染到页面上,我们就需要借助 store.subscribe() 的函数,监听 state,每次页面刷新都会调用此函数,虽然每次更给都会调用此方法,但因为是 diff 算法,所以并不会影响性能;

  所以,核心 store.js 处理逻辑,index.js 来渲染页面,组件来提交事件,

  store.js  处理 redux 逻辑

    

  index.js  渲染 redux 数据

    

  组件.js  向 redux 提交数据

    

  有关 store 的优化

    store 将分为 4 个文件,分别管理 store.js 的一部分,这样的话,我们可以更好的处理里面的内容;

      reducer.js  是专门处理逻辑的地方,是 createStore 函数里面的参数,reducer 函数,里面拥有两个形参,一个 state 存放数据,一个 action 组件通过 dispatch 提交的数据,

      action.js  创建一个工厂函数,由于返回的数据固定,所以我们只需要返回一个对象,里面有 type 属性和 payload(载荷)属性,这样我们每次调用此工厂函数就可以了,无需每次都向上提交一个对象,里面 type 属性和 payload 属性

      state.js  专门存放数据的地方

      store.js  是专门管理 redux 的地方,我们通过 createStore 的返回值 store,来向上提交数据或者监听 state 数据的变化来渲染页面,createStore 里面的参数是一个函数,此函数就是 reducer

  

  如果我们的数据很多,该怎么办,一个reducer最好只专心处理一种处理,但是不同种类的数据,我们就需要多个reducer来处理,我们怎样才能把所有的 reducer 不同种类的数据融合起来

  我们就要使用 redux 中的 combineReducers 方法来进行这方面的处理;

  combineRducers() 方法,需要一个参数,此参数是一个对象,属性值为 reducer 不同种类的数据,属性可以分属性值同名,es6的写法,此函数有个返回值,返回值就是所用不同种类数据构成的集合

  案例:

    reducer.js

    

    store.js 无需改变

    

    index.js 无需改变

    

    当我们在组件调用redux数据的时候

    

    我们的控制台就会打印此结果

    

    所以相当于我们就改变了一个 reducer.js 的文件,然后就可以使用多个 reducers 函数

redux 第二部分的更多相关文章

  1. react第二十单元(react+react-router-dom+redux综合案例2)

    第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业

  2. Unity 之 Redux 模式(第二篇)—— Rigidbody 改造,摄像机控制

    作者:软件猫 日期:2016年12月8日 转载请注明出处:http://www.cnblogs.com/softcat/p/6144041.html 上一篇文章中存在一个很严重的问题,首先我们先让 M ...

  3. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  4. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  5. redux学习

    redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...

  6. react+redux教程(八)连接数据库的redux程序

    前面所有的教程都是解读官方的示例代码,是时候我们自己写个连接数据库的redux程序了! 例子 这个例子代码,是我自己写的程序,一个非常简单的todo,但是包含了redux插件的用法,中间件的用法,连接 ...

  7. react+redux教程(七)自定义redux中间件

    今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...

  8. Redux原理(一):Store实现分析

    写在前面 写React也有段时间了,一直也是用Redux管理数据流,最近正好有时间分析下源码,一方面希望对Redux有一些理论上的认识:另一方面也学习下框架编程的思维方式. Redux如何管理stat ...

  9. react+redux教程(三)reduce()、filter()、map()、some()、every()、...展开属性

    reduce().filter().map().some().every()....展开属性   这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https:// ...

随机推荐

  1. vim insert VISUAL模式无法右键复制问题(转)

    转自:https://blog.csdn.net/coder_oyang/article/details/89096219 vim中使用鼠标右键粘贴,失败.vim的模式: 网上解法: 1. 普通模式下 ...

  2. Docker 容器数据卷(Data Volume)与数据管理

    卷(Volume)是容器中的一个数据挂载点,卷可以绕过联合文件系统,从而为Docker 提供持久数据,所提供的数据还可以在宿主机-容器或多个容器之间共享.通过卷,我们可以可以使修改数据直接生效,而不必 ...

  3. postman安装时提示打不开

    安装postman6.6.1时,提示打不开,如下图: 解决办法: 1.找到以下两个路径直接删除文件,注安装路径不同有可能不同 C:\Users\Administrator\AppData\Roamin ...

  4. Active Directory participation features and security extensions

    Participation in the Active Directory Samba 3.0 series, as well as the OS since Windows 2000, is pos ...

  5. Java面向对象(三) 【面向对象深入:抽象类,接口,内部类等】

    面向对象(Object Oriented) 1.抽象类抽象就是将拥有共同方法和属性的对象提取出来.提取后,重新设计一个更加通用.更加大众化的类,就叫抽象类.1)abstract 关键字修饰类.方法,即 ...

  6. python文件操作:文件指针移动、修改

    一.文件指针移动 二.修改   一.文件指针移动 #大前提:文件内指针的移动是Bytes为单位的,唯独t模式下的read读取内容个数是以字符为单位 # f.read(3) # with open('a ...

  7. Tomcat控制台日志输出到本地文件

    记事本打开startup.bat文件,修改如下内容 “call “%EXECUTABLE%” start %CMD_LINE_ARGS%” 改为 call "%EXECUTABLE%&quo ...

  8. Codeforces Round #454 D. Power Tower (广义欧拉降幂)

    D. Power Tower time limit per test 4.5 seconds memory limit per test 256 megabytes input standard in ...

  9. Android异常与性能优化相关面试问题-内存管理面试问题详解

    内存管理机制概述: 分配机制:操作系统会为每一个进程分配一个合理的内存大小,从而保证每一个进程能够正常的运行,不至于内存不够使用,或者某个进程占用过多的内存. 回收机制:在系统内存不足的时候,系统有一 ...

  10. PHP工程师学习计划

    从开始学习PHP到现在,只是大致的对PHP的一些基础的东西了解一下,从没有制定一个较为完整的学习计划,所以自己的编程水平一直都处在基本的入门阶段,所以结合自己的实际情况制定了一个感觉还算合理的学习计划 ...