初识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全部源码解析,可以参考我总结
  • 更多优质文章参考

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/450833.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

12个有趣的C语言面试题

摘要&#xff1a;12个C语言面试题&#xff0c;涉及指针、进程、运算、结构体、函数、内存&#xff0c;看看你能做出几个&#xff01; 1.gets()函数 问&#xff1a;请找出下面代码里的问题&#xff1a; #include<stdio.h> int main(void) { char buff[10]; memset…

超全Typora快速入门

文章目录一.Typora快速入门1.代码块2.标题3.字体4.引用5.水平分割线6.图片插入7.超链接8.列表9.表格10.任务列表11.数学表达式12.生成目录13.表情符号14.定义脚注15.文件导出16.主题修改17.修改主题背景图片18.设置背景透明度19.Typora 插入图片调整大小20.字体和颜色21.页内跳…

聊聊毕业设计系列 --- 系统实现

效果展示 github moment-server github地址 moment github地址 moment-manage github地址 articles 聊聊毕业设计系列 --- 项目介绍 聊聊毕业设计系列 --- 系统实现 前言 在上一篇文章中&#xff0c;主要是对项目做了介绍&#xff0c;并且对系统分析和系统设计做了大概的介绍。…

求职小记(持续更新)

自16年春正式工作以来也有两年半了&#xff0c;也许是对现在leader的不满。也许是想要折腾一下&#xff0c;也许还有也许&#xff0c;决定换一份工作&#xff0c;结束两年零四个月的第一家it工作。从8月份的离职到十月底的offer经历了很多&#xff0c;外面天慢慢的凉了&#xf…

js 实现用window.print()打印页面中的部分内容,局部打印

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 如下方法&#xff1a; function printProof(){var printData document.getElementById("forPrint").innerHTML; // 只打印 f…

搞懂静态变量static

文章目录1.什么是static&#xff1f;2.static关键字的作用是什么&#xff1f;3.静态变量和非静态变量的区别&#xff1f;4.static可以修饰局部变量吗&#xff1f;5.可以通过this访问静态变量吗&#xff1f;6.静态方法能否调用非静态方法&#xff1f;7.静态变量、普通变量、静态…

神经网络优化(二) - 滑动平均

1 滑动平均概述 滑动平均&#xff08;也称为 影子值 &#xff09;&#xff1a;记录了每一个参数一段时间内过往值的平均&#xff0c;增加了模型的泛化性。 滑动平均通常针对所有参数进行优化&#xff1a;W 和 b&#xff0c; 简单地理解&#xff0c;滑动平均像是给参数加了一个影…

Docker完全自学手册

阿里云大学免费课程&#xff1a;Docker完全自学手册课程介绍&#xff1a;Docker 是 PaaS 提供商 dotCloud 开源的一个基于 LXC 的高级容器引擎&#xff0c;源代码托管在 Github 上, 基于go语言并遵从Apache2.0协议开源。Docker 是一个开源的应用容器引擎&#xff0c;让开发者可…

Spring 之注解事务 @Transactional

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 先让我们看代码吧&#xff01; 以下代码为在“Spring3事务管理——基于tx/aop命名空间的配置”基础上修改。首先修改applicationContext…

超级程序员神话

摘要&#xff1a;大部分的程序员在思想里都会某种程度的承认&#xff0c;承认自己只是一个普通的程序员&#xff0c;但这世界上确实有一些超级程序员&#xff0c;在一个为企业开发应用的程序员和一个为谷歌写搜索算法的程序员之间&#xff0c;或和一个开发用来控制读写头从磁盘…

HashMap30连问,彻底搞懂HashMap

文章目录一、背景知识1、什么是Map&#xff1f;2、什么是Hash&#xff1f;3、什么是哈希表&#xff1f;4、什么是HashMap?5、如何使用HashMap&#xff1f;6、HashMap有哪些核心参数&#xff1f;7、HashMap与HashTable的对比&#xff1f;8、HashMap和HashSet的区别&#xff1f;…

博弈论的算法总结

开头先啰嗦一句&#xff1a;想学好博弈&#xff0c;必然要花费很多的时间&#xff0c;深入学习&#xff0c;不要存在一知半解&#xff0c;应该是一看到题目&#xff0c;就想到博弈的类型。 以及&#xff0c;想不断重复不断重复&#xff0c;做大量各大oj网站的题目&#xff0c;最…

Slog55_lua面向对象之lua类

Slog55_lua面向对象之lua类 ArthurSlog SLog-55 Year1 GuangzhouChina Aug 30th 2018 微信扫描二维码&#xff0c;关注我的公众号GitHub 掘金主页 简书主页 segmentfault 现实中的事情不是根据人的喜好而定的 比如长在你嘴里的智齿 大部分情况下 你会因为自己&#xff0…

Spring中的@scope注解

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 Scope 简单点说就是用来指定bean的作用域作用域 &#xff08;官方解释&#xff1a;scope用来声明IOC容器中的对象应该处的限定场景或者…

编程语言大比拼——谁的效率高

摘要&#xff1a;C、C、Java这几个屹立不倒的开发语言&#xff0c;如果以功能点作为单位的话&#xff0c;谁的效率最高呢&#xff1f;如果在项目初期就能确定功能点数量&#xff0c;那么就可以很好的预测项目完成时间。这一点是不是对你很有帮助呢&#xff1f; 一份6000个项目的…

Hadoop之Flume详解

1、日志采集框架Flume   1.1 Flume介绍     Flume是一个分布式、可靠、和高可用的海量日志采集、聚合和传输的系统。     Flume可以采集文件&#xff0c;socket数据包等各种形式源数据&#xff0c;又可以将采集到的数据输出到HDFS、hbase、hive、     kafka等众多…

搞懂Java的反射机制

搞懂Java的反射机制 1.什么是反射&#xff1f; java的反射机制是指可以在运行状态下获取类和对象的所有属性和方法。 2.反射的作用&#xff1f; 1、在运行时获取一个类/对象的成员变量和方法 2、在运行时创建一个类的对象 3、在运行时判断一个对象是否属于一个类 3.反射有哪些…

表单oninput和onchange事件区别

oninput事件是元素value发生变化是立刻触发&#xff0c;而onchange是元素发生变化并且失去焦点时才会触发。 转载于:https://www.cnblogs.com/ykli/p/9565601.html

Struts2中<s:iterator>基本用法及示例

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 Struts2中<s:iterator>基本用法及示例 Iterator用于遍历集合&#xff08;java.util.Collection&#xff09;或枚举值&#xff08;j…

如何使用postman做接口测试

1、get请求传参 只要是get请求都可以在浏览器中直接发&#xff1a; 在访问地址后面拼 ?keyvalue&keyvalue 例如&#xff1a;在浏览器中直接输入访问地址&#xff0c;后面直接拼需要传给服务器的参数http://api.nnzhp.cn/api/user/stu_info?stu_name小黑2、post请求&…