简述redux(1)
简述redux(1)
概念: 是一个有用的架构,应用场景一般为:多交互、多数据源。如:
- 某个组件的状态需要共享
- 某个状态需要在任何地方可以看到
- 一个组件需要改变全局状态。
- 一个组件需要改变另一个组件的状态
设计思想
- Web 应用是一个状态机,视图与状态是一一对应的。
- 所有的状态,保存在一个对象里面。
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)的更多相关文章
- 从Redux源码探索最佳实践
前言 Redux 已经历了几个年头,很多 React 技术栈开发者选用它,我也是其中一员.期间看过数次源码,从最开始为了弄清楚某一部分运行方式来解决一些 Bug,到后来看源码解答我的一些假设性疑问,到 ...
- Redux概念简述
react可以写出一些比较简单的一些项目,但是只能写出很简单的一些项目,原因是什么呢,原因是react是一个非常轻量级的是视图层框架,打开官网可以看到大大的一行字,A JavaScript libra ...
- 简述react、redux、react-redux、redux-saga、dva之间的关系
[react] 定位:React 是一个用于构建用户界面的JavaScript库. 特点:它采用声明范式来描述应用,建立虚拟dom,支持JSX语法,通过react构建组件,能够很好的去复用代码: 缺点 ...
- (五)Redux入门
1 Redux概念简述 flux推出的时候有一些缺点.比如store可以存在多个,不是特别好用 于是逐渐进化为了redux. 2 Redux的工作流程 拿借书作举例: action creators是 ...
- 13. react 基础 redux 的基本介绍 及 用 antd 编写 TodoList 的样式
1. redux 简述 当 store 内的 数据进行变更的时候 多个组件感知到 store 内的数据变化 将会被自动更新 2. redux 工作流 Store 代表数据存储 (例如: 图书馆管理 ...
- redux和dva
实习的时候,公司使用的是react,react说实话生态学的还不是很完善,就暂时先不做跟react相关的博客,等以后学好了react全家桶之后,专门再总结一下react的内容 这两天看了公司的alit ...
- RxJS + Redux + React = Amazing!(译一)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- 通过一个demo了解Redux
TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...
- RxJS + Redux + React = Amazing!(译二)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
随机推荐
- JavaWeb 三层框架
1. MVC 设计模式 Model: JavaBean; View: Jsp; Controller: Servlet; 2. JavaWeb 三层框架 所谓三层是表述层(WEB 层), 业务逻辑层( ...
- 运行 Tomcat, 在 Intellij IDEA 控制台输出中文乱码的解决方法
打开 Run/Debug Configurations → Tomcat Server → 要运行的 Tomcat → Server 页签,在 VM options 中输入: -Dfile.encod ...
- 20170520 BADI增强学习
一.要求:Tcode:FF_5 导入数据运行时,产生财务凭证之前修改某些字段值.Exmp:FEBRE-VWEZWBKPF-XBLNRFEBEP-CHECTBSEG-ZUONR there is a b ...
- Python基础-configparser和hashlib模块
configparser模块 import configparser config = configparser.ConfigParser() #将配置写入到文件 config[', 'Compres ...
- 内网IP&外网IP/NAT
内网的计算机以NAT(网络地址转换)协议,通过一个公共的网关访问Internet.内网的计算机可向Internet上的其他 计算机发送连接请求,但Internet上其他的计算机无法向内网的计算机发送连 ...
- windows下docker toolbox无法下载boot2docker.iso
GitHub连不上导致自动更新失败.(网络形势严峻!) 通过别的途径手动下载了指定的最新的boot2docker.iso文件.(比方说迅雷!比方说迅雷!比方说迅雷!) https://github.c ...
- OpenGL学习进程(10)第七课:四边形绘制与动画基础
本节是OpenGL学习的第七个课时,下面以四边形为例介绍绘制OpenGL动画的相关知识: (1)绘制几种不同的四边形: 1)四边形(GL_QUADS) OpenGL的GL_QUADS图 ...
- Linux文件系统管理 挂载命令mount
概述 mount命令用来挂载Linux系统外的文件. Linux 中所有的存储设备都必须挂载之后才能使用,包括硬盘.U 盘和光盘(swap 分区是系统直接调用的,所以不需要挂载).不过,硬盘分区在安装 ...
- jstl-functions标签
比如需要再jstl中定义一个String类型的数组 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl ...
- gstreamer-tips-picture-in-picture-compositing
http://www.oz9aec.net/index.php/gstreamer/347-more-gstreamer-tips-picture-in-picture-compositing htt ...