初学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 + 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' })
}) ```
具体思路如下:

##### 了解这些就能完成一个最简单的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实例的更多相关文章
- Vue2.x源码学习笔记-从一个小例子查看vm实例生命周期
学习任何一门框架,都不可能一股脑儿的从入口代码从上到下,把代码看完, 这样其实是很枯燥的,我想也很少有人这么干,或者这么干着干着可能干不下去了. 因为肯定很无聊. 我们先从一个最最简单的小例子,来查看 ...
- Spring Boot学习笔记——搭建一个最简单的hello world
使用Spring Initializer新建项目 进入https://start.spring.io/新建一个项目,并下载下来. 这就是一个最基础的spring boot项目了. 我这里是基于spri ...
- [CSS3] 学习笔记-HTML与CSS简单页面效果实例
一个简单的首页的设计: html文件: <!doctype html> <html> <head> <meta charset="UTF-8&quo ...
- 一个最简单的Servlet实例
先在tomcat的webapps目录下,新建一目录,如test.然后,在test目录下建立WEB-INF为名的目录.这个必须有. 然后,在WEB-INF目录下建立classes目录.用以存储所用到的c ...
- 一个超级简单的Jetty实例
Maven: <!-- https://mvnrepository.com/artifact/org.mortbay.jetty/jetty --> <dependency> ...
- how tomcat works 读书笔记(二)----------一个简单的servlet容器
app1 (建议读者在看本章之前,先看how tomcat works 读书笔记(一)----------一个简单的web服务器 http://blog.csdn.net/dlf123321/arti ...
- pygame学习笔记(6)——一个超级简单的游戏
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 学了这么长时间的Pygame,一直想写个游戏实战一下.看起来很简单的游戏,写其来怎么这么难.最初想写个俄罗斯方块 ...
- storm笔记:Storm+Kafka简单应用
storm笔记:Storm+Kafka简单应用 这几天工作须要使用storm+kafka,基本场景是应用出现错误,发送日志到kafka的某个topic.storm订阅该topic.然后进行兴许处理.场 ...
- ASP.NET MVC Web API 学习笔记---第一个Web API程序
http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...
随机推荐
- 服务控件与html标签的一点
前言 很久没有用服务器控件开发了,在新公司待了三四个月了,这个公司一直都用服务器控件.所以在开发的过程中也发现了一丢丢的东东,也许以前就知道,只是没有认真的发现. 过程 前几天在开发页面的时候,有个需 ...
- 【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
第一次写博,没什么经验,主要是把最近自己对Dev的一些研究贴出来大家共同探讨,有不足之处望大家帮忙斧正. WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的 ...
- html+ashx 缓存问题
最近采用html+ashx的方式做了一个项目的几个配置页面的功能,由于浏览器的缓存问题,每次更新数据提交后,页面总是不会刷新,也就是说除了第一次加载页面会向一般处理(ashx)拿数据外,其他情况都是优 ...
- /dev/null 2>&1 解释(转)
cmd >a 2>a 和 cmd >a 2>&1 为什么不同? cmd >a 2>a :stdout和stderr都直接送往文件 a ,a文件会被打开两遍, ...
- PHP初学留神(五)·小结
来学习快两个月了,这周末即将回家开始写论文.那么走之前,好好总结一下这两个月的所学所得吧.这段时间,在实验室里做的Web开发主要涉及到了web开发的一些框架内容以及php基础知识.思维导图记录如下. ...
- 大型B/S系统技术总结(不断更新)
看了<淘宝技术这十年>和<大型网站系统与Java中间件实践>这些书,对大型B/S系统的构建越来越感兴趣,于是尝试收集和总结一些常用的技术手段.不过大型网站的架构是根据业务需求不 ...
- About building ant & install ant on centos7 {ant source code 1.94}
hamcrest-junit-2.0.0.0.jar java-hamcrest-2.0.0.0.jar copy to ant-sourceCodeDir/lib/o ...
- SQL学习_时间函数
最近测试报表需要统计不同时间段的列表记录,收集一些时间函数作为参考,原文地址:http://blog.csdn.net/lyzlyfok/article/details/6282509 sql ser ...
- TypeScript学习指南第二章--接口(Interface)
接口(Interface) TypeScript的核心机制之一在于它的类型检查系统(type-checker)只关注一个变量的"模型(shape)" 稍后我们去了解这个所谓的形状是 ...
- 我的PHP之旅--认识PHP
PHP是什么? php是一个脚本语言,它运行在服务器端并会以纯文本的形式返回到服务器,它是免费的. php可以对数据库中的数据进行:增删改查,可以对数据进行加密,接收表单. php的文件后缀是.php ...