简述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 ...
随机推荐
- ehcache 的HelloWorld实现(二)
EhCache最新版本是3.X 本人一直用的是2.X 比较稳定 功能足够用: 所以还是用2.X版本: 我们新建一个Maven项目, pom.xml里引入 ehcache支持: <dependen ...
- 2015-02-07——js笔记
示例1: var abc; console.log(abc === undefined); console.log(abc === null); console.log(t ...
- hive 安装警告 WARN conf.HiveConf: HiveConf of name hive.metastore.local does not exist
解决方法: 在0.10 0.11或者之后的HIVE版本 hive.metastore.local 属性不再使用. 在配置文件里面: <property> <name>hi ...
- JavaWeb—拦截器Interceptor
1.概念 java里的拦截器是动态拦截Action调用的对象,它提供了一种机制可以使开发者在一个Action执行的前后执行一段代码,也可以在一个Action执行前阻止其执行,同时也提供了一种可以提取A ...
- 2.3 使用ARDUINO控制MC20进行GPRS的TCP通讯
需要准备的硬件 MC20开发板 1个 https://item.taobao.com/item.htm?id=562661881042 GSM/GPRS天线 1根 https://item.taoba ...
- C++语言的I/o使用方法详解
构造器 语法: fstream( const char *filename, openmode mode ); ifstream( const char *filename, openmode mod ...
- C++ 语言操作符的优先级
cppreference.com -> C++ 操作符优先级 C++ 操作符优先级 优先级 操作符 1 () [] -> . :: ! ~ ++ ...
- OS X 与传统Unix的一点区别
在传统的Unix系统或者Linux系统中,你是很难在根目录下找到大写开头的文件夹的, 但是看一下OS X: ls / Applications Users etc private var Develo ...
- $Android AlarmManager的用法详解
在Android的Alarm机制中,使用AlarmManager可以实现类似闹钟这样的定时任务.在毕业设计项目中要实现定时任务的功能,所以在这里先进行一下梳理. (一)AlarmManager与Bro ...
- octotree神器 For Github and GitLab 火狐插件
Code tree for GitHub and GitLabExtension to show code tree for GitHub and GitLab. Useful for develop ...