简述redux(1)


概念: 是一个有用的架构,应用场景一般为:多交互、多数据源。如:
  • 某个组件的状态需要共享
  • 某个状态需要在任何地方可以看到
  • 一个组件需要改变全局状态。
  • 一个组件需要改变另一个组件的状态
设计思想
  1. Web 应用是一个状态机,视图与状态是一一对应的。
  2. 所有的状态,保存在一个对象里面。
API
  • store:保存数据的地方,可以看成是一个容器,整个应用只有一个store,Redux提供了createStore函数,用于生成Store对象。

      import { createStore } from 'redux';
    const store = createStore(fn);
  • state:store度下你给包含所有数据,如果想得到某个时点的数据,就要对store生成快照,这种时点的数据集合就叫做State,当前时刻的state可以通过state.getState()拿到。

      import { createStore } from 'redux';
    const store = createStore(fn); const state = store.getState();
  • action:State 的变化,会导致 View 的变化。State 的变化必须是 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。Action 是一个对象。其中的type属性是必须的,表示 Action 的名称。

      const action = {
    type: 'ADD_TODO',
    payload: 'Learn Redux'
    };
  • Action Creator:生成多个action。

  • 基本概要图解

  • 待续

简述redux(1)的更多相关文章

  1. 从Redux源码探索最佳实践

    前言 Redux 已经历了几个年头,很多 React 技术栈开发者选用它,我也是其中一员.期间看过数次源码,从最开始为了弄清楚某一部分运行方式来解决一些 Bug,到后来看源码解答我的一些假设性疑问,到 ...

  2. Redux概念简述

    react可以写出一些比较简单的一些项目,但是只能写出很简单的一些项目,原因是什么呢,原因是react是一个非常轻量级的是视图层框架,打开官网可以看到大大的一行字,A JavaScript libra ...

  3. 简述react、redux、react-redux、redux-saga、dva之间的关系

    [react] 定位:React 是一个用于构建用户界面的JavaScript库. 特点:它采用声明范式来描述应用,建立虚拟dom,支持JSX语法,通过react构建组件,能够很好的去复用代码: 缺点 ...

  4. (五)Redux入门

    1 Redux概念简述 flux推出的时候有一些缺点.比如store可以存在多个,不是特别好用 于是逐渐进化为了redux. 2 Redux的工作流程 拿借书作举例: action creators是 ...

  5. 13. react 基础 redux 的基本介绍 及 用 antd 编写 TodoList 的样式

    1. redux 简述 当 store 内的 数据进行变更的时候  多个组件感知到 store 内的数据变化 将会被自动更新 2. redux 工作流 Store  代表数据存储 (例如: 图书馆管理 ...

  6. redux和dva

    实习的时候,公司使用的是react,react说实话生态学的还不是很完善,就暂时先不做跟react相关的博客,等以后学好了react全家桶之后,专门再总结一下react的内容 这两天看了公司的alit ...

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

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

  8. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

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

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

随机推荐

  1. spring多数据源事务配置

    项目中遇到多数据源问题, 对于每个数据源需要单独完成事务控制, 这里记录下具体实现方法 在spring配置文件中 定义两个数据源 <!-- 数据源定义(spring-jndi) -->   ...

  2. MySQL中InnoDB存储引擎中的哈希算法

    InnoDB存储引擎使用哈希算法来对字典进行查找,其冲突机制采用链表方式,哈希函数采用除法散列方式.对于缓冲池页的哈希表来说,在缓冲池中的Page页都有一个chain指针.它指向相同哈希函数值的页的. ...

  3. python面向对象(二)

    属性查找 类有两种属性:数据属性和函数属性 1. 类的数据属性是所有对象共享的 2. 类的函数属性是绑定给对象用的 class BeijingStudent:   school='Beijing'  ...

  4. 斯坦福大学Andrew Ng - 机器学习笔记(7) -- 异常检测

    大概用了一个月,Andrew Ng老师的机器学习视频断断续续看完了,以下是个人学习笔记,入门级别,权当总结.笔记难免有遗漏和误解,欢迎讨论. 鸣谢:中国海洋大学黄海广博士提供课程视频和个人笔记,在此深 ...

  5. git原理:pack打包

    git向磁盘中存储对象使用“松散(loose)”对象格式.比如文件a.txt第一个版本大小是10k,第二个版本向其中添加了一行代码,假如此时文件为10.1k,那么第二个版本会重新产生一个1.1k的文件 ...

  6. 20170524 委外采购的物料BOM

    目标:找委外采购订单BOM, 我的方法:1.直接在电脑中搜索关键字:2.到系统中找数据查询3.委外采购订单系统如何操作? 数据怎么做, 实施: 结果:MDBAEKET, "采购订单项目计划行 ...

  7. spring项目报org.apache.tiles.definition.DefinitionsFactoryException: I/O错误原因及解决办法。

    今天升级一个spring项目遇到如下错: HTTP Status 500 - Request processing failed; nested exception is org.apache.til ...

  8. dataTables的用法

    原地址:http://blog.csdn.net/mickey_miki/article/details/8240477 1.DataTables的默认配置 $(document).ready(fun ...

  9. Loadrunder之脚本篇——关联函数对话框详解

    Insert->New Step,打开Add Step对话框 选择函数web_reg_save_param,点击OK,打开关联函数设置窗口 说明: Parameter Name 此处设置存放参数 ...

  10. hostname -f 失败解决办法

    $ hostname fzk $ uname -n fzk 当 hostname -f 时报错:未搜索到主机名 产生这个原因时因为  /etc/hosts和/etc/sysconfig/network ...