初识react(二) 实现一个简版的html+redux.js的demo
回顾
- 初识react(一) 揭开jsx语法和虚拟DOM面纱
- 初识react(二) 实现一个简版的html+redux.js的demo
- 初识react(三)在 react中使用redux来实现简版计数器
- 初识react(四) react中异步解决方案之 redux-saga
- 初识react(五) 数据流终极解决方案 dva(零配置)
前言
首先纠正个误区,redux可以配合jq等框架使用,并不单单局限于react。为了让所有人都看懂,我们这里先只实现一个最简单版本的 html+redux.js的使用。
为什么出现redux
随着单页面应用的复杂,多个没有联系的组件之间想要共享状态(state)很困难,Redux的出现解决了数据问题
redux三大原则
单一数据源
- 整个应用的state都被存储在一个仓库中,我们称之为store,整个应用只能有一个store。
只读的state
- 唯一改变state的方法就是dispatch(action),即派发动作。
使用纯函数执行修改
- 为每个action用纯函数编写reducer来描述如何修改state
说了这么多,看不懂?没关系,就是有三个概念 state、reducer、action。下面我们一一讲解API
概念解析
1、store 仓库
- redux提供了一个createStore函数,用来生成store
- store就是保存数据的地方,可以看成一个容器。整个应用只能有一个store
function createStore(reducer) { //将状态放到一个盒子里 别人改不了...
}
let store = createStore(reducer)复制代码
2、State 状态
store对象包含所有数据。如果想得到某个时点数据,就要对Store生成快照。这种时间点的数据集合,就叫做State。 当前时刻的State,可以通过store.getState()拿到。
let state = store.getState()
复制代码
3、action 动作
- action必须是一个对象,type是必须的,用户可以派发动作来改变state.
let action = {type:"change_title_text",text:"改变标题了"
}
复制代码
4、store.dispatch(action) 派发动作
- store.dispatch()是发出action的唯一方法
let store = createStore(reducer);
store.dispatch(action) //action=>{type:"change_title_text",text:"改变标题了"}
复制代码
5、Reducer 管理员,也可以称之为处理器
- Store收到派发的动作后即dispatch(action),必须返回一个新的state,这样视图才会变化。
- 这种state的计算过程叫做Reducer,是一个纯函数,接受state和action作为参数,返回一个新的state
let reducer = function(state,action){return new_state;
}
复制代码
废话了这么多,很庆幸把基本概念说完了,终于来个实战来看看具体怎么工作的。我们做一个最简单计算器,点击加1,来看看redux怎么工作的
计数器实现步骤(redux)
1、声明一个初始化状态
let initState = {number:0}
复制代码
2、createStore 重点
- 创建仓库,保存状态,对外暴露当前状态=>getState 和如何更改状态的方法=>dispatch
let createStore=(reducer)=> { //将状态放到一个盒子里 别人改不了let state ; //声明状态function dispatch(action) { //派发 参数是action动作,action是一个对象state= reducer(state,action); //调用写好的方法,这个方法会返回一个新的状态}dispatch({}); //内部需要先定义次let getState = ()=> JSON.parse(JSON.stringify(state)); //获取状态的方法 深拷贝return {getState,dispatch};
}复制代码
- 需要知道 action是一个对象=>{type:"add",count:5},类型为add,每次点击加5
- 在创建仓库的时候,会默认先调用,dispatch({}),给state赋值默认状态
- 对外暴露 getState方法,用户可以 获取最新状态
- 对外暴露 dispatch方法,用户可以派发动作
当看不懂时,只要知道目的只有一个,就是在给state赋默认值。 先dispatch({})=>reducer(state,action)。就可以赋默认值拉,至于为什么,往下看
3、reducer实现
- 管理员,可以根据类型返回不同的状态
let reducer=(state=initState,action)=> { //管理员,负责如何更改状态的switch (action.type) { //更改状态 要有一个新的状态覆盖掉case "add":return {number:state.number+action.count}}return state;
};
复制代码
好了,到目前为止,我们来梳理下思路
- 我们会这样调用 let store = createStore(reducer),这其中发生了什么,如何把初始状态赋值给state的
- 步骤dispatch({}) =>reducer(initState,action)=>state=initState
4、渲染页面视图为初始状态
let store = createStore(reducer);
function render() {let content = document.querySelector('.content');content.innerHTML = store.getState().getState().number;
}
render();
复制代码
- 将页面视图与store中的state进行绑定。看效果
目前为止,一切完美,那我们怎么点击按钮改变状态,只能通过store.dispatch()方法
5、点击改变视图
btn.onclick = function () {store.dispatch({type:"add",count:5});render()
}
复制代码
到目前为止,一个最简单的redux应用算实现了,其实redux还是比较简单的,重点是理解它概念,后续会讲解在react中如何使用redux
- redux全部源码解析,可以参考我总结
- 更多优质文章参考
初识react(二) 实现一个简版的html+redux.js的demo相关推荐
- 写一个简版 asp.net core
动手写一个简版 asp.net core Intro 之前看到过蒋金楠老师的一篇 200 行代码带你了解 asp.net core 框架,最近参考蒋老师和 Edison 的文章和代码,结合自己对 as ...
- 来,一起手撸一个简版 Redis(附源码)
点击上方 视学算法,选择 设为星标 优质文章,及时送达 作者 | 凯京技术团队 来自 | my.oschina.net/keking/blog/3037372 今天主要介绍两个开源项目,然后创建应用最 ...
- 生成一个简版导游地图
目录 1 简版导游地图功能简介 2 注册并登录 3 设置景区(商圈)地图 3.1 新增景区 3.2 增加一个景点介绍 3.3 地图中增加一个景点 3.4 增加几个其他类型的点,如"美食&q ...
- 编写一个简版的数据库维护框架04-代码实现(基本函数部分1)
先从基本函数入手开始一步一步完善所有代码 一.控件遍历 利用 VS Studio 编程,它会把控件放到父类窗口的一个集合中,可以使用 循环语句将这些控件找出来. 基本方法: public static ...
- react 学习(一) 实现简版虚拟 dom 和挂载
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试的也都能答出来.但对于 react 只是 ...
- 手写一个简版的vue
Vue源码中实现依赖收集(观察者模式),实现了三个类: Dep:扮演观察目标的角色,每一个数据都会有Dep类实例,它内部有个subs队列,subs就是subscribers的意思,保存着依赖本数据的观 ...
- 初识react(四) react中异步解决方案之 redux-saga
回顾 初识react(一) 揭开jsx语法和虚拟DOM面纱 初识react(二) 实现一个简版的html redux.js的demo 初识react(三)在 react中使用redux来实现简版计数器 ...
- 7-3 简版田忌赛马 (10 分)
7-3 简版田忌赛马 (10 分) 这是一个简版田忌赛马问题,具体如下: 田忌与齐王赛马,双方各有n匹马参赛,每场比赛赌注为200两黄金,现已知齐王与田忌的每匹马的速度,并且齐王肯定是按马的速度从快到 ...
- JUnit单元测试简版的学生管理系统
JUnit的作用是:在庞大的程序项目中,要测试一个功能模块,不需要将整个庞大的项目都运行,只需要将需要测试的功能块进行JUnit测试就行 非常的方便,也很清晰,提高的开发的速度. 目前普遍使用的JUn ...
最新文章
- PHP如何使用GeoIP数据库
- Runtime(动态添加属性)
- OPenGL程序导致WM_TIMER消息不能激发
- BGP——邻居状态机+报文分析(总结)
- java-数组排序--插入排序
- anaconda如何做python笔记_python笔记
- Linux strace命令详解
- MVC架构下,使用NPOI读取.DOCX文档中表格的内容
- 黑马java idea (据说是完整的)网盘
- 7-16 新浪微博热门话题 (30 分)
- CodeIgniter框架源码学习之安全类--Security.php
- 三星和华为均发布了5G手机芯片,谁的性能更强?
- oppo手机出现android什么坏了,OPPO手机提示“停止运行”怎么办 oppo停止运行的解决方法...
- SAP PCA利润中心会计案例教程案例介绍
- 三分钟带你搞懂什么是向上转型和向下转型
- wince下SD卡驱动开发
- 使用SSD mobilenet训练自己的数据集
- 高校新闻抓取分析之百度新闻篇---数据抓取
- 【Linux】htop命令的使用详解
- Interviewing at Amazon — Leadership Principles Reading Notes
热门文章
- c语言中entern int x y,关于extern和int main()的结构有关问题
- 求以下double数组的平均值(四舍五入保留两位小数):
- 计算机用于数据管理经历了,管理系统中计算机应用--期中测验答案
- Linux 服务器程序规范、服务器日志、用户、进程间的关系
- string对象和C风格字符串
- 约瑟夫环-(数组、循环链表、数学)
- map类的erase方法的在Linux与Windows中的差异
- TensorFlow(4)-TFRecord
- 数据结构和算法(02)---字符串(c++)
- 《Python Cookbook 3rd》笔记(4.14):展开嵌套的序列