Redux 总结
1.redux:
function reducer(state=-,action)
{
switch(action.type)
{
case '':
return ...
case '':
return ...
default:
return ...
}
}
const store = createStore(reducer)
function listener(){
const current = store.getState()
console.log(current);
}
store.subscribe(listener)
store.dispatch({type:'...'})
2.redux配合react一起使用:
index.js
function render()
{
ReactDom.render(<App store={store}/>,document.getElementById('root'))
}
store.subscribe(render)
App.js: 里面是组件和store
index.reducer.js 里面是reducer 和 actioncreator
3.使用redux-thunk让redux处理异步:
一.安装redux-thunk
二.使用applyMiddleware开启thunk中间件
三.Action可以返回函数,使用dispatch提交action
首先开启中间件:

引入thunk:

然后创建store


调试工具:

4.使用react-redux:
npm install react-redux –save
忘记subscribe,只使用reducer、action、和dispatch
·Provier组件在应用最外层,传入store即可,只用一次
·Connect负责从外部获取组建需要的参数
index.js:

App.js(这是一个组件)

*用装饰器的方式书写:


Redux 总结的更多相关文章
- RxJS + Redux + React = Amazing!(译一)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- 通过一个demo了解Redux
TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...
- RxJS + Redux + React = Amazing!(译二)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
- redux学习
redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- Redux初见
说到redux可能我们都先知道了react,但我发现,关于react相关的学习资料很多,也有各种各样的种类,但是关于redux简单易懂的资料却比较少. 这里记录一下自己的学习理解,希望可以简洁易懂,入 ...
- react+redux教程(八)连接数据库的redux程序
前面所有的教程都是解读官方的示例代码,是时候我们自己写个连接数据库的redux程序了! 例子 这个例子代码,是我自己写的程序,一个非常简单的todo,但是包含了redux插件的用法,中间件的用法,连接 ...
- react+redux教程(七)自定义redux中间件
今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
随机推荐
- SNMP学习
http://blog.sina.com.cn/s/blog_4502d59c0101fcy2.html 简单网络管理协议(SNMP)是TCP/IP协议簇的一个应用层协议.在1988年被制定,并被In ...
- df -h 挂死
df -h 卡死的情况,那是因为无法统计挂载的目录的大小 一般是因为还挂载了一些外部的目录,如nfs的目录 可以用mount | column -t 命令查看哪些目录 然后umount这些目录, 一般 ...
- URAL - 1243 - Divorce of the Seven Dwarfs (大数取模)
1243. Divorce of the Seven Dwarfs Time limit: 1.0 second Memory limit: 64 MB After the Snow White wi ...
- 联想z470 win7 64位双系统继续恢复镜像法安装黑苹果10.9.3
之前的方法是安装 10.9 http://blog.csdn.net/kissing_huo/article/details/23559239的 苹果最新的swift的语言 出来 必须最新的xcod ...
- 微软100题第51题:和为n连续正数序列
题目:输入一个正数n,输出全部和为n连续正数序列.比如输入15,因为1+2+3+4+5=4+5+6=7+8=15,所以输出3个连续序列1-5.4-6和7-8. 方法一:记录序列长度.推断首项是否满足条 ...
- Zico源代码分析:执行启动过程分析和总结
事实上已经有童鞋对Zico的源代码和执行过程进行了总结,比如:http://www.cnblogs.com/shuaiwang/p/4522905.html.这里我再补充一些内容. 当我们使用mvn ...
- [HNOI2008] GT考试(DP+矩阵快速幂+KMP)
题目链接:https://www.luogu.org/problemnew/show/P3193#sub 题目描述 阿申准备报名参加 GT 考试,准考证号为 N 位数 X1,X2…Xn(0 <= ...
- Apache Bench测试
- 压力测试神器 Siege - Locust Web测压工具python开源 - 介绍: ab是apachebench命令的缩写. ab的原理:ab命令会创建多个并发访问线程,模拟多个访问者同时对某 ...
- View简介
1.View 是所有widget类的基类 2.View的坐标 根据上面的图应该会比较容易明白,图中屏幕上放了一个ViewGroup布局,里面有个View控件 getTop:获取到的,是view自身的顶 ...
- 安装meteor运行基本demo发生错误。
bogon:~ paul$ curl https://install.meteor.com/ | sh % Total % Received % Xferd Average Speed Time Ti ...