Redux-学习笔记
文章目录
- Redux-学习笔记
- 安装Redux
- Redux简介(为什么要用Redux?)
- Redux和React
- React-redux
- redux-actions使用
- 项目打包
Redux-学习笔记
安装Redux
redux需要安装以下依赖:
cnpm install redux --save
cnpm install react-redux --save
cnpm install redux-actions --save
@connect
装饰器报错处理
因为用到了es6/7的语法,需要安装babel转码
npm run eject //解除封装
cnpm install babel-plugin-transform-decorators-legacy --save-dev
cnpm install @babel/plugin-proposal-decorators --save-dev
在package.json中添加插件支持ES7:
"babel": {"presets": ["react-app"],"plugins": [["@babel/plugin-proposal-decorators",{"legacy": true}]]},
Redux简介(为什么要用Redux?)
先来看看React里面的数据是怎样传递的(下图中并不是说this.state只能在“团长”处,这里只是为了简便,所以才这样写,其实营长,连长都可以有自己的this.state):
React数据流:
- 可以看到,一般都是团长等高级干部商量好对策之后(
this.state
设置好) - 把命令一层层的传递下去执行(
this.props
渲染) - 要是哪里发生了什么新的敌情了(想更新页面内容了)
- 就得一层层往上报告(通过回调一层层把数据传上去),此过程也必须一层层往上传递,不能越级,下面有解释
- 团长做出决断后再发布命令传下去执行(通过
setState
修改数据并重新渲染)
这个过程是不能越级的,比如说你一连长发现了敌情就不能直接报告团长,而必须先报告给一营长,一营长再报告给团长,这里层级还不是特别深,你再来个排长,班长什么的,按照这种模式,等团长知道敌情,敌人都打到家门口啦,又或者说一连长想找三连长喝个酒,还得先把这个消息传给营长,再传给团长,再传给二营长再传给三连长,这……
Redux横空出世
所以说层级不深,组价之间也没有什么公用数据的时候,用React自身的setState其实也可以了,可是嵌套一深,或者组件有一些公用数据时就比较麻烦了,于是就有了redux(其实之前还有个flux),回到这个例子就是,他们在整个团之外又建立了一个通讯班(Redux):
看起来就像下面这样:
这里只是一个很简单的示意图,实际使用并非如此,这个图示为了让大家理解React中的数据和Redux中的数据是独立的,并没有任何关系。
Redux
现在让我们抛开战斗编制(React),单看通讯班(Redux)。
其实网上讲Redux的教程非常多,这里就简单说一下:
store
store
:首先要创建一个对象store,这个对象有各种方法,用来让外界获取Redux的数据(store.getState
),或者让外界来修改Redux中的数据(store.dispatch
)
import { createStore } from 'redux';
const store = createStore(reducer);
action
:描述我要干啥,一般是一个对象的形式,其中有一个type字段是必须要有的,比如:{ type:‘请求增援’ }
,还可以带点数据{ type:‘请求增援’,gun:"100" }
reducer
reducer
:撸开袖子真刀实枪的就去干了,比如一连长要求增援,增援要求是100杆枪,团长马上就给你加了100杆枪送了过去。
const defaultState = 0;
const reducer = (state = defaultState, action) => {switch (action.type) {case '请求增援':return state + action.gun;default: return state;}
};
action
和reducer
也可以想象成产品经理
和程序员
的关系。
产品经理:“我要一个按钮,圆角的”
程序员:“嗯,做好了”
产品经理:“换个颜色吧,红色”
程序员:“ok,换好了”
差不多就是这样,产品经理并不操心具体怎么实现的,他只说他想要干什么(type
),然后再提点实现的要求(各种其他的数据),程序员就去具体实现(reducer,修改state,然后返回一个全新的state
,这里注意我们并没有直接返回原来的state,我们返回的是一个全新的state对象,因为reducer
函数是一个没有副作用的纯函数)
那怎么去触发这个操作(action)呢,就好比说我一连长发现敌情了,我怎么报告给通讯班,让通讯班来处理呢?
就是上面提到过的store.dispatch
,不过还要加一个参数,那就是action
store.dispatch({ type:‘请求增援’,gun:"100" })
这样就可以触发action,执行reducer,得到一个全新的state。
小例子:
<!DOCTYPE html>
<html><head><title>REDUX</title><script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script></head><body><div><p>Clicked: <span id="value">0</span> times<button id="add">+</button><button id="del">-</button></p></div><script>window.onload = function(){const action = ()=>{return {type:'DEL'}}const reducer = (state = 0, action) => { //reducerswitch (action.type) {case 'ADD':return state + 1;case 'DEL':return state -1}};const store =Redux.createStore(reducer); //创建store对象document.getElementById("add").onclick= function(){store.dispatch({ type:'ADD' }) //触发action};document.getElementById("del").onclick= function(){store.dispatch(action()) //触发action};function render(){document.getElementById("value").innerHTML = store.getState(); //获取store中的state}store.subscribe(render) //监听state变化执行render}</script></body>
</html>
Redux和React
到此为止,Redux自己就折腾完了,那么Redux自己的数据并没有用,它要把数据交给React用才行,接下来讲一讲怎么把数据交给React来用。
上面我们创建了一个对象store,我们要把这个store对象作为props传给React,那React就可以用了。
这个store只能有一个,也就只能创建一次,也就是说你必须在最顶层处创建一个store对象,然后再一层层的传递下去,才能让所有的组件都能获得这个store对象,调用它的方法。
获取Redux中的数据
比如说我要在render函数中显示Redux的数据,那么我就可以先获取它的数据:
store.getState()
然后把这个数据当做props渲染到组件中去就行了。
更新Redux中的数据
如果你要修改它的数据,那就在JSX中调用
store.dispatch( { type:‘请求增援’,gun:"100" } )
响应Redux中的变化
那么这里问题又来了,你调用了store.dispatch之后Redux中的数据确实改变了,可是React并没有什么变化啊。也就是说React中的render函数并没有被触发呀是不是,就好像React中你直接修改React中的state是没有用的而必须调用React的setState才能重新渲染。
因此,为了让Redux的数据一改变我们就重新渲染,Redux自己提供了一个方法叫做
store.subscribe(render)
这个函数可以监听Redux中state的变化,一旦Redux中的state发生了变化,render函数就会被调用,页面就会被重新渲染。
上面这个过程就是手动调用的过程,但这样调用有点麻烦,因为要让所有的子组件都能应用store中的数据,那么所有的组件就都要把store当做props传进来,这也太麻烦了。
还是那之前那个例子来说,你一连长发现了敌情,是不用层层上报了,可以直接报告给通讯班,通讯班再生成新的命令,可问题是,你从下往上打报告是简单了,可是从上往下发布命令仍然是一层层的传递的呀。
就好比说,一连长发现了敌情,报告上去,通讯班做出决定让三连长带人去打,通讯班还是得通过团长–营长–连长这条路去一层层发布命令,能不能让通讯班直接就通知三连长呢,当然是有的,这就是我们的React-redux库
React-redux
这个是需要你自己去用npm额外安装的。
使用这个方法之后,我们就不需要一层层往下发布命令了
在React-redux中有两个比较关键的概念:Provider
和connect
方法。
一般我们都将顶层组件包裹在Provider组件之中,这样的话,所有组件就都可以在react-redux的控制之下了,但是store必须作为参数放到Provider组件中去
<Provider store = {store}><团长/>
<Provider>
这个组件的目的是让所有组件都能够访问到Redux中的数据。
redux-actions使用
redux-actions有两大法宝createAction
和handleActions
createAction
原来创建action:
const startAction = () => ({ type: START });
使用redux-actions创建action:
import { createAction } from 'redux-actions';
const startAction = createAction(START);
handleActions
原来reducer操作state写法要使用switch或if else来匹配:
function timer(state = defaultState, action) {switch (action.type) {case START:return { ...state, runStatus: true };case STOP:return { ...state, runStatus: false };case RESET:return { ...state, seconds: 0 };case RUN_TIMER:return { ...state, seconds: state.seconds + 1 };default:return state;}
}
使用redux-actions``reducer操作state:
const timer = handleActions({START: (state, action) => ({ ...state, runStatus: true }),STOP: (state, action) => ({ ...state, runStatus: false }),RESET: (state, action) => ({ ...state, seconds: 0 }),RUN_TIMER: (state, action) => ({ ...state, seconds: state.seconds + 1 }),
}, defaultState);
项目打包
npm run build
打包成功后,新增build文件
如何访问?
输入npm install -g serve
或者 cnpm install -g serve
安装服务,或者使用nginx,可见https://blog.csdn.net/hhhmonkey/article/details/119333875类似
进入build目录输入 serve
在浏览器输入 http://localhost:5000
Redux-学习笔记相关推荐
- Redux 学习笔记
1:首先安装redux: npm install --save redux 2:引入redux : import { createStore } from 'redux'; //首先创建执行函数,Re ...
- redux学习笔记归纳
设计思想: (1)Web 应用是一个状态机,视图与状态是一一对应的. (2)所有的状态,保存在一个对象里面. 核心源码: 基本概念: 1.Store:就是保存数据的地方,你可以把它看成一个容器.整个 ...
- ci mysql 事务_MySQL事务-学习笔记
MySQL事务-学习笔记 MySQL事务 事务的意义 案例:银行转账过程 A向B转账500,A原来有1000,B有500. 分析: SQL处理过程: A 减少 500 B 增加 500 以上两点必须同 ...
- React-Native学习笔记
资源: 1. Redux 中文文档 Redux 中文文档 2. Atom文本编辑工具 Atom文本编辑工具 3. React-native 官方文档 React-native 官方文档 问题: 1. ...
- react组件卸载调用的方法_好程序员web前端培训分享React学习笔记(三)
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
- react取消捕获_React学习笔记(三)
React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处理(16.3之后) 初始化 ...
- 5214页PDF的进阶架构师学习笔记,阿里巴巴内部Jetpack宝典意外流出
背景 在深度使用 Flutter 开发过程中,我们遇到了业务代码耦合严重,代码可维护性糟糕,如入泥泞.我们需要一个统一的应用框架来摆脱当下的开发困境,而这也是 Flutter 领域空缺的一块处女地. ...
- 【学习笔记】React+React全家桶学习笔记
文章目录 1 为什么要使用React 2 React的定义 3 React的三大特性 4 React入门 4.1 hello_react 4.2 虚拟DOM的创建 4.3 JSX 4.4 模块与组件, ...
- React Native v0.55 学习笔记1
React Native v0.55 学习笔记1 学习内容来自官网文档0.55版本 RN 是基于 React 的思想,相比于 web 的一些组件,RN 使用的是基于原生( android.ios )的 ...
- ant design pro模板_Ant Design Pro 学习笔记
学习笔记 摘要介绍 Ant Design Pro 是一个基于Ant Design搭建起来的模板项目.它提供了两个主要布局:BasicLayout.UserLayout,在布局基础上制作了20多个基础页 ...
最新文章
- Apache的服务端包含--SSI
- linux qml 环境,利用Qml与Golang打造Gui客户端(二)qamel环境安装
- MPB:中国地大侯卫国组-​ 针对热泉原位培养矿物的低质量DNA提取方法
- P3809【模板】后缀排序
- iOS之深入解析内存管理NSTimer的强引用问题
- python基础开发环境_Python基础教程,第一讲,开发环境搭建
- Paxos在Chubby中的应用
- android chrome iframe设置src属性无法启动app
- Quartus II 现有各版本之差异(方便选择), 以及 破解文件
- linux划分5t硬盘,关于磁盘分区(以linux系统为例)
- 腾讯视频如何设置关闭本地视频后自动打开主界
- Chart.js学习
- WebApi实现验证授权Token,WebApi生成文档等
- 高通工具过滤_高通QXDM|高通诊断监视工具(Qualcomm QXDM)下载v3.14 官方版 - 欧普软件下载...
- 我该怎么自学3D建模?
- 云服务器bat文件在哪里,云服务器bat文件在哪里
- 威廉玛丽学院计算机专业,威廉玛丽学院专业设置有哪些?
- C++中重载和重写的区别
- Spring Cloud 全家桶简介
- ubuntu桌面管理环境 gdm3,KDM,lightdm
热门文章
- zoj 3707 Calculate Prime S
- ES6函数第三篇:函数篇(新增API与箭头函数)
- JavaScript的运动——模拟重力场
- 【已解决】Errors during downloading metadata for repository ‘appstream‘: - Status code: 404 for
- 【自定义排序规则】剑指 Offer 45. 把数组排成最小的数
- 2021廊坊高考口试成绩查询,2021河北八省联考成绩查询入口
- qt designer 自定义插件找不到指定的模块_SpringBoot之spring-boot-load模块
- 国内网站安全测试6大步骤
- 如何使用VAIO Care恢复和还原VAIO
- 解构给默认值_5个 JS 解构有趣的用途