简述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 ...
随机推荐
- 整理前端css/js/jq常见问题及解决方法(1)
1. 兼容ie8圆角的解决方法:下载ie-css3.htc文件在css中加入behavior:url(ie-css3.htc);z-index:3; position:relative 即可 2. 去 ...
- python函数回顾:hex()
描述 hex() 函数用于将10进制整数转换成16进制,以字符串形式表示. 语法 hex 语法: hex(x) 参数说明: x -- 10进制整数 返回值 返回16进制数,以字符串形式表示. 实例 & ...
- 进程、数据共享、进程锁、进程池、requests模块和bs4(beautifulsoup)模块
一.进程 1.进程间数据不共享,如下示例: import multiprocessing data_list = [] def task(arg): data_list.append(arg) pri ...
- 中文价格识别为数字 java代码
运行效果: public class VoicePriceRecognition { private final static String NOT_HAS_PRICE_CONTENT="n ...
- java switch case 枚举类型的反编译结果
package com.example.demo; import java.io.PrintStream; // Referenced classes of package com.example ...
- spring cloud 使用feign 遇到问题
spring cloud 使用feign 项目的搭建 在这里就不写了,本文主要讲解在使用过程中遇到的问题以及解决办法 1:示例 @RequestMapping(value = "/gener ...
- 【算法题 14 LeetCode 147 链表的插入排序】
算法题 14 LeetCode 147 链表的插入排序: 解题代码: # Definition for singly-linked list. # class ListNode(object): # ...
- C语言运算符优先级误解
优先级问题 表达式 可能误以为的结果 实际结果 .的优先级高于*. ->操作符用于消除这个问题 *p.f p所指对象的字段f. (*p).f 对p去f偏移,作为指针,然后进行解除引用操作. *( ...
- C#将图片白色背景设置为透明
Image image = System.Drawing.Image.FromFile(@"C:\A.JPG"); Bitmap pbitmap = new Bitmap(imag ...
- Architecture Patterns
This chapter provides guidelines for using architecture patterns. Introduction Patterns for system a ...