初学redux笔记,及一个最简单的redux实例
categories:
- 笔记
tags:
- react
- redux
前端框架
把初学redux的一些笔记写了下来
分享一个入学redux很合适的demo,
用redux实现计数器
这是从阮一峰老师github上面找到,redux最简单的例子,我加了点点注释
demo在线预览
源码地址
js部分主要代码如下:
```
/* ----定义reducer:用switch来匹配发出的操作信息并改变state,如下面的INCREMENT----*/function counter(state, action) {if (typeof state === 'undefined') {return 0}switch (action.type) {case 'INCREMENT':return state + 1case 'DECREMENT':return state - 1default:return state}}/*-----store: 存储state数据,可以用getState方法来获取当前state用createStore方法,传入reducer来得到store,一个应用对应一个store----*/var store = Redux.createStore(counter)var valueEl = document.getElementById('value')function render() {valueEl.innerHTML = store.getState().toString()}render()/*----store的subscribe方法监听state变化,一旦变化就执行render函数----*/ store.subscribe(render)/*----store的dispatch定义一个操作信息,reducer会将这个信息匹配具体对state的操作*/document.getElementById('increment').addEventListener('click', function () {store.dispatch({ type: 'INCREMENT' })})document.getElementById('decrement').addEventListener('click', function () {store.dispatch({ type: 'DECREMENT' })}) ```
具体思路如下:
了解这些就能完成一个最简单的redux实例了
其他需要了解的方法:
- applyMiddlewares():传入中间件,并将其依次执行
- connect: 连接容器组件和UI组件
const VisibleTodoList = connect( mapStateToProps, //建立一个从外部state到UI组件props的映射mapDispatchToProps //定义UI组件的参数到dispatch方法的映射
)(TodoList)
//TodoList是 UI 组件,VisibleTodoList就是由 React-Redux 通过connect方法自动生成的容器组件
- < provider/>组件:包裹在根组件外,使得所有子组件都能拿到state
render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )
待更新!!
转载于:https://www.cnblogs.com/gaoxianlyx/p/6266175.html
初学redux笔记,及一个最简单的redux实例相关推荐
- ros 消息队列与缓冲区_[ROS] [笔记(1)] 一个最简单的例子:Hello Robot(消息、发布者与订阅者)...
本例程包含如下内容: 1)创建编译 Package: 2)自定义消息: 3)发布者与订阅者. 0.Hello Robot 的场景: 我们想要完成这样一个场景: 1)有一系列 robot 排成一排(pu ...
- SQL存储过程【笔记】一个较简单的库存月结
关于库存月结的一个存储过程: 1.测试版本) select @@version /********************************* Microsoft SQL Server 2005 ...
- Flutter学习笔记 —— 完成一个简单的新闻展示页
Flutter学习笔记 -- 完成一个简单的新闻展示页 前言 思路分析 案例代码 结束语 上图 前言 刚学Flutter不久,今天我们来看看如何使用 Container & ListView实 ...
- golang游戏开发学习笔记-开发一个简单的2D游戏(基础篇)
此文写在golang游戏开发学习笔记-创建一个能自由探索的3D世界之后,感兴趣可以先去那篇文章了解一些基础知识,在这篇文章里我们要创建一个简单的2D游戏场景以及配套的人物,并实现人物运动和碰撞检测功能 ...
- TensorFlow笔记(3)——利用TensorFlow和MNIST数据集训练一个最简单的手写数字识别模型...
前言 当我们开始学习编程的时候,第一件事往往是学习打印"Hello World".就好比编程入门有Hello World,机器学习入门有MNIST. MNIST是一个入门级的计算机 ...
- 【贪玩巴斯】Unity3D初学圣经(一)——学习要求 Unity简单介绍 游戏引擎介绍 课程体系介绍 「1-1 到 1-4 」—— 2021年12月9日
Unity3D初学圣经 一 --学习要求 & Unity简单介绍 & 游戏引擎介绍 & 课程体系介绍 本文对应视频P1 1-1 到P2 1-4 1.学习要求 2.Unity简单 ...
- Jmeter使用基础笔记-写一个http请求
前言 本篇文章主要讲述2个部分: 搭建一个简单的测试环境 用Jmeter发送一个简单的http请求 搭建测试环境 编写flask代码(我参考了开源项目HttpRunner的测试服务器),将如下的代码保 ...
- 《深入理解OSGi:Equinox原理、应用与最佳实践》笔记_1_运行最简单的bundlehelloworld...
<深入理解OSGi:Equinox原理.应用与最佳实践>笔记_1_运行最简单的bundlehelloworld 买了周大大的OSGI的书看 先前完全没有基础 就靠这本书看看学学 顺便记一些 ...
- FPGA学习笔记(1)简单的时序逻辑电路——流水灯
FPGA学习笔记(1)简单的时序逻辑电路--流水灯 编程语言为Verilog HDL 原理 (1)设计一个计数器,使开发板上的4个LED状态每500ms翻转一次.开发板上的晶振输出时钟频率为50MHz ...
最新文章
- Linux系统配置交换分区
- [云炬创业学笔记]第二章决定成为创业者测试14
- 视网膜脱落相关知识(持续更新中)
- 盘点阿里程序员常用的 15 款开发者工具
- 杭州电子科技大学保研计算机,杭州电子科技大学计算机学院计算机科学与技术(一级学科)保研细则...
- 技术三板斧:关于技术规划、管理、架构的思考
- 线程间通信 1全局变量2当前主对话框指针3发消息方式4 AfxBeginThread的返回值(为CWinThread类型的指针)5AfxGetApp...
- PHP水仙花问题解法之一
- 行编辑器c语言,行编辑器——C语言.doc
- 编辑画面,element-ui的单选框组选中值以及画面选择样式无法切换,但是绑定的v-model值已发生变化
- Linux修改的文件“修改时间”
- 设计模式(1)-- 七大软件设计原则-开闭原则
- ASP.NET MVC - 使用Post, Redirect, Get (PRG)模式
- 很有用的SQLServer全局变量
- 群同态基本定理证明_群论(2): 群作用, Sylow定理
- 金融数据挖掘与分析(三)-案例实战(1)
- 租住南山的互联网大厂人:年入70万,睡城中村单间
- angularjs技术
- 某程序员吐槽:刚过试用期就被辞退,理由竟是不转发朋友圈!
- lab 颜色模式的生理原因 黄色, 洋红色 刺眼。 绿色,蓝色,不刺眼。