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 + 1
case 'DECREMENT':
return state - 1
default:
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' })
}) ``` 具体思路如下: ![image](http://ww3.sinaimg.cn/large/96ea1c33gw1fbkj72bjm6j20gr085gmt.jpg)
##### 了解这些就能完成一个最简单的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')
)``` ---
待更新!!

初学redux笔记,及一个最简单的redux实例的更多相关文章

  1. Vue2.x源码学习笔记-从一个小例子查看vm实例生命周期

    学习任何一门框架,都不可能一股脑儿的从入口代码从上到下,把代码看完, 这样其实是很枯燥的,我想也很少有人这么干,或者这么干着干着可能干不下去了. 因为肯定很无聊. 我们先从一个最最简单的小例子,来查看 ...

  2. Spring Boot学习笔记——搭建一个最简单的hello world

    使用Spring Initializer新建项目 进入https://start.spring.io/新建一个项目,并下载下来. 这就是一个最基础的spring boot项目了. 我这里是基于spri ...

  3. [CSS3] 学习笔记-HTML与CSS简单页面效果实例

    一个简单的首页的设计: html文件: <!doctype html> <html> <head> <meta charset="UTF-8&quo ...

  4. 一个最简单的Servlet实例

    先在tomcat的webapps目录下,新建一目录,如test.然后,在test目录下建立WEB-INF为名的目录.这个必须有. 然后,在WEB-INF目录下建立classes目录.用以存储所用到的c ...

  5. 一个超级简单的Jetty实例

    Maven: <!-- https://mvnrepository.com/artifact/org.mortbay.jetty/jetty --> <dependency> ...

  6. how tomcat works 读书笔记(二)----------一个简单的servlet容器

    app1 (建议读者在看本章之前,先看how tomcat works 读书笔记(一)----------一个简单的web服务器 http://blog.csdn.net/dlf123321/arti ...

  7. pygame学习笔记(6)——一个超级简单的游戏

    转载请注明:@小五义  http://www.cnblogs.com/xiaowuyi 学了这么长时间的Pygame,一直想写个游戏实战一下.看起来很简单的游戏,写其来怎么这么难.最初想写个俄罗斯方块 ...

  8. storm笔记:Storm+Kafka简单应用

    storm笔记:Storm+Kafka简单应用 这几天工作须要使用storm+kafka,基本场景是应用出现错误,发送日志到kafka的某个topic.storm订阅该topic.然后进行兴许处理.场 ...

  9. ASP.NET MVC Web API 学习笔记---第一个Web API程序

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...

随机推荐

  1. 推荐一款好用的java反编译软件——JavaDecompiler

    这款反编译器叫 "Java Decompiler",在网上也是久负盛名,最近因为工作需要找来用了下,果然不错,之前都是用eclipse的插件jad来看源码的.下面这个链接是Java ...

  2. VB6-图像分割利器 Microsoft Picture Clip控件

    在医院做图像处理时碰到双面扫描仪,需要将扫描到的2张图像分割为一张并打印.在分割图像的过程中总是不得法,后来虽然有CBM666的指导,但给的方法也还是不太方便.无意中在翻一本vb书的时候看到了一个使用 ...

  3. linux系统下的shell脚本

    #!/bin/bash  说明我需要启用bin目录下的bash解释器解释脚本##将第一个文件拷贝到第二个文件,如果出错将错误输出到/dev/null 的空.if判断cp的返回值是否为1,1为成功,0为 ...

  4. proteus画元件

    一.元件概述 使用过“protel DXP”画元件的人想必对一个元件的构成已经非常清楚了.一个完整的元件包括如下几个部分: 元件 = 原理图元件模型 + PCB封装模型 + 电路仿真特性 1.原理图元 ...

  5. POSIX多线程编程(上)-基本概念

    线程概念 我们把正在计算机中执行的程序叫做"进程"(Process) ,而不将其称为程序(Program).所谓"线程"(Thread),是"进程&q ...

  6. Linux中crond服务与crontab用法

    需要写个在Linux下定时更新系统的脚本,man crondtab 不甚详细,现将网络上的介绍列举如下: crontab是一个很方便的在unix/linux系统上定时(循环)执行某个任务的程序使用cr ...

  7. C语言预处理运算符

    转自C语言预处理运算符 预处理还需要运算符?有没有搞错? ^_^, 没有搞错,预处理是有运算符,而且还不止一个: #(单井号)    -- 字符串化运算符. ##(双井号 )-- 连接运算符 #@   ...

  8. 服务器监控之 ping 监控

    在运维人员的日常工作中,对物理服务器的监控十分重要.物理机的 CPU.内存.磁盘使用率,网卡流量,磁盘 IO 等都需要进行监控.通过 ICMP 协议的 ping 监控,可以判断物理服务器运行是否正常或 ...

  9. [jobdu]矩形覆盖

    推导一下,就是斐波那契数列那样的.但是要注意的是,int存不下,算一下需要long long才行,因为是指数级上升的. #include <cstdio> #define LEN 75 # ...

  10. VC 为静态控件添加事件(修改ID号以后添加事件)

    操作系统:Windows 7软件环境:Visual C++ 2008 SP1本次目的:为静态控件添加事件,如:STATIC.Picture Control等等 有时候我们找到一个图片,为对话框背景添加 ...