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 ...
随机推荐
- Thunderbird导出邮件为PDF文件
一般如果在windows下,可以通过打印的方式,生成一个PDF文件,可以完成此任务. 而今天在linux下采取此方式,生成的PDF文件居然是空白.原因未知. 而Thunderbird并未提供该功能,这 ...
- hdu 4771 求一点遍历全部给定点的最短路(bfs+dfs)
题目如题.题解如题. 因为目标点最多仅仅有4个,先bfs出俩俩最短路(包含起点).再dfs最短路.)0s1A;(当年弱跪杭州之题,现看如此简单) #include<iostream> #i ...
- 浅析为什么 char 类型的范围是 : -128~+127
在 C 语言中. signed char 类型的范围为 -128~127,每本教科书上也这么写.可是没有哪一本书上(包含老师)也不会给你为什么是 -128~127,这个问题貌似看起来也非常easyea ...
- Effective C++ 条款12
复制对象时,勿忘其每个成分 作者在本节条款提醒我们,在多重继承的情况下进行copy或者copy assignment 的operator=的编写时,一定要考虑base 类部分数据的初始化后者复制. 对 ...
- 在jqueryEasyUI界面将时间以日期加时分秒的格式显示
问题描写叙述: oracle 10G中用户表有一个字段是日期型.数据格式为yyyy-MM-dd HH:mm:ss,前端显示时仅仅能显示成yyyy-MM-dd 后面的 HH:mm:ss不显示. 经过一番 ...
- angularjs 标签指令
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- TPC-C测试
TPC发布的测试标准之一,是专门针对联机事务处理系统(OLTP)的测试标准.1992年发布1.0版本.最新版本5.11,2010年发布. 测试规范中模拟了一个比较复杂并具有代表意义的OLTP应用环境, ...
- Chromium Graphics: Video Playback and Compositor
Video Playback and Compositor Authors: jamesr@chromium.org, danakj@chromium.org The Chromium composi ...
- POJ-1182 食物链 并查集(互相关联的并查集写法)
题目链接:https://cn.vjudge.net/problem/POJ-1182 题意 中文题目,就不写了哈哈 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃 ...
- 用xmanager6启动Linux上的图形界面程序
1.下载Xmanager6 并自行安装,这里不赘述了 2.打开Xmanager.启动Xstart 3.按提示输入:主机IP,协议,用户名,命令,完成后点击“保存”,接着点击“运行”,运行xmanage ...