react-redux笔记
用vuex来对比来说明
| 分类 | vuex | redux | react-redux |
|
写state |
commit mutation (mutable state) |
dispatch reducer (immutable state) |
|
|
读state |
组件实例能取到$store属性, 通过计算属性的方式拿到想要的state |
store.getState |
用connet封装组件,state和dispacher 会以prop的形式注入组件中 |
|
订阅state |
计算属性本身就是响应式的,无需其他操作 |
store.subscribe |
在connet封装后的组件中subscribe,视图 组件直接收到新的prop,而无需对state的变 化有感知 |
| 模块化 | module组装, namespace命名空间 | combineReducers | |
| 异步 | 用action(异步操作包含在action中)派发mutation |
用中间件处理包含异步操作的函数,在异步函数或promise回调中派发reducer |
|
| 概念辨析 |
vuex的action和redux的action不是一个东西 vuex的action相当于redux中传给中间件处理的异步函数; redux中的action相当于在vuex中commit一个mutation时传的参数集合(包含mutation名称和payload) |
||
react-redux笔记的更多相关文章
- React+Redux学习笔记:React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
- 【原】react+redux实战
摘要:因为最近搞懂了redux的异步操作,所以觉得可以用react+redux来做一个小小的项目了,以此来加深一下印象.切记,是小小的项目,所以项目肯定是比较简单的啦,哈哈. 项目效果图如图所示:(因 ...
- 初学redux笔记,及一个最简单的redux实例
categories: 笔记 tags: react redux 前端框架 把初学redux的一些笔记写了下来 分享一个入学redux很合适的demo, 用redux实现计数器 这是从阮一峰老师git ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
- react+redux官方实例TODO从最简单的入门(6)-- 完结
通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...
- react+redux官方实例TODO从最简单的入门(1)-- 前言
刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...
- 重写官方TodoList,对于初学react+redux的人来说,很有好处
虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
随机推荐
- 浅谈java中的祖先类Object
首先一道题: public class User{ private String name; private int age; public String getName() { return nam ...
- Microsoft宣布为Power BI提供AI模型构建器,关键驱动程序分析和Azure机器学习集成
微软的Power BI现在是一种正在大量结合人工智能(AI)的商业分析服务,它使用户无需编码经验或深厚的技术专长就能够创建报告,仪表板等.近日西雅图公司宣布推出几款新的AI功能,包括图像识别和文本分析 ...
- "Loading a plug-in failed The plug-in or one of its prerequisite plug-ins may be missing or damaged and may need to be reinstalled"
The Unarchiver 虽好,但存在问题比我们在mac上zip打包一个软件xcode, 然后copy to another mac, 这时用The Unarchiver解压缩出来的xcode包不 ...
- Flyweight 享元(结构型)
一:描述:(该模式实际应用较少) Flyweight 享元模式是对大量细粒度的元素进行共享和重用.减少对象的创建减轻内存: 注和单例模式不同的是:享元模式的各个对象佣有各自的行为并可实例化,单例模式的 ...
- win10磁盘/cpu占用100%问题
https://www.zhihu.com/question/27664545 https://www.zhihu.com/question/27664545 微软自己的解决办法 https://su ...
- Arcgis API for JS——普通分屏联动及二三维联动
对于二三维联动,有多种方法进行实现,当时旧项目使用了当时能掌握的一种写法,在技能提升了这么多后当然要对这些写法做一个总结. 一.通过监听View上的鼠标事件变化来进行分屏联动(同一坐标系) (同理可以 ...
- Gym101889J. Jumping frog(合数分解+环形dp预处理)
比赛链接:传送门 题目大意: 一只青蛙在长度为N的字符串上跳跃,“R”可以跳上去,“P”不可以跳上去. 字符串是环形的,N-1和0相连. 青蛙的跳跃距离K的取值范围是[1, N-1],选定K之后不可改 ...
- 实现react路由动态加载的组件
import React, { Component } from 'react'; import Loading from '../../base/nc_Loading'; /* * date: 20 ...
- js·逻辑运算
|| 遇到第一个为真就返回 && 遇到第一个为假就终止,返回false,如果没遇到就返回最后那一个 5&&4&&2&&1 ==> ...
- linux 部署
一.d2 安装之后的配置 centos系统安装后的基本配置: .常用软件安装: yum install -y bash-completion vim lrzsz wget expect net-too ...