前言

在《Redux系列01:从一个简单例子了解action、store、reducer》里面,我们已经对redux的核心概念做了必要的讲解。接下来,同样是通过一个简单的例子,来讲解如何将redux跟react应用结合起来。

我们知道,在类flux框架设计中,单向数据流转的方向无非如下:

转换成redux的语言,就是这个样子。接下来就看实际例子,一个简单到不存在实用价值的todo list。

例子:实际运行效果

本文的代码示例可以在github上下载,点击查看。README里有详细的运行步骤,照着做就可以了,这里也一起贴出来。

首先安装依赖项

  1. npm install

如果还没安装browserify,那么也要安装一下

  1. npm install -g browserify

然后,在当前目录运行如下脚本

  1. browserify app.js -o bundle/app.js -t [ babelify --presets [ es2015 react ] ]

在浏览器里打开index.html,就可以看到效果了。运行效果如下,很挫吧。。。

例子:实际代码

由于代码实在太简单,这里就直接贴出来了。

actionCreator

首先,定义actionCreator。

  1. // action creator
  2. var addTodoActions = function(text){
  3. return {
  4. type: 'add_todo',
  5. text: text
  6. };
  7. };

reducer

然后,定义reducer,可以看到是对add_todo事件进行了处理

  1. // reducers
  2. var todoReducer = function(state, action){
  3. if(typeof state === 'undefined'){
  4. return [];
  5. }
  6. switch(action.type){
  7. case 'add_todo':
  8. return state.slice(0).concat({
  9. text: action.text,
  10. completed: false
  11. });
  12. break;
  13. default:
  14. return state;
  15. }
  16. };

接着,以前面定义的reducer为参数,创建store

store

  1. var store = Redux.createStore(todoReducer);

将react跟store进行绑定

最后,到关键步骤啦,可以看到:

  1. getInitialState里:通过store.getState()获取数据进行初始的渲染。
  2. componentDidMount里:监听store的状态变化,当状态变化时,触发onChange回调。
  3. handleAdd里:通过store.dispatch(addTodoActions(value))修改state。(步骤二对这个进行了监听)

    4.在onChange里:获取最新的state,并重新渲染视图
  1. var App = React.createClass({
  2. getInitialState: function(){
  3. return {
  4. items: store.getState()
  5. };
  6. },
  7. componentDidMount: function(){
  8. var unsubscribe = store.subscribe(this.onChange);
  9. },
  10. onChange: function(){
  11. this.setState({
  12. items: store.getState()
  13. });
  14. },
  15. handleAdd: function(){
  16. var input = ReactDOM.findDOMNode(this.refs.todo);
  17. var value = input.value.trim();
  18. if(value)
  19. store.dispatch(addTodoActions(value));
  20. input.value = '';
  21. },
  22. render: function(){
  23. return (
  24. <div>
  25. <input ref="todo" type="text" placeholder="输入todo项" style={{marginRight:'10px'}} />
  26. <button onClick={this.handleAdd}>点击添加</button>
  27. <ul>
  28. {this.state.items.map(function(item){
  29. return <li>{item.text}</li>;
  30. })}
  31. </ul>
  32. </div>
  33. );
  34. }
  35. });
  36. ReactDOM.render(
  37. <App />,
  38. document.getElementById('container')
  39. );

写在后面

整个例子看下来其实非常flux style,非常简单,连异步都没有涉及,所以也就不花过多篇幅进行讲解,相信看下代码,跑下文中的demo就可以理解了。

实际项目不可能像文中的这么简单,所以一般redux还要结合react-redux、redux-thunk等库使用,才能用到实战中去。这部分会在后续展开

Redux系列02:一个炒鸡简单的react+redux例子的更多相关文章

  1. 炒鸡简单的canvas粒子(山东数漫江湖)

    位图的canvas一直不会被svg比下去的原因了. 俗话说,须弥芥子,是大小之说,也有以小见大之说,颗颗粒子,足以构建宏大效果. 这是一篇炒鸡简单的canvas粒子教程,主要是讲如何粒子特效的原理,一 ...

  2. [Redux] Passing the Store Down with <Provider> from React Redux

    Previously, we wrote the Provider component by ourself: class Provider extends Component { getChildC ...

  3. 啊啊啊啊啊啊啊今天就写,炒鸡简单 数据库Sqlite的创建,库的增删改查

    啦啦啦啦啦啦啦 写这个不用多长时间,我直接写代码注释都是些语句,Sql语句和Api来操作数据库 ,语句的参数我会注释 SQLite数据库创建数据库需要使用的api:SQLiteOpenHelper必须 ...

  4. Python制作动态二维码只需要一行代码!炒鸡简单!

    分享一个比较有意思的项目,只需要一行Python代码就可以快捷方便生成普通二维码.艺术二维码(黑白/彩色)和动态GIF二维码. 用法比较简单,直接通过pip安装即可. pip3 install myq ...

  5. 炒鸡简单的javaScript的call和apply方法

    解释一 作者:杨志 链接:https://www.zhihu.com/question/20289071/answer/14644278 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商 ...

  6. 一个炒鸡好用的pdf阅读器

    下载地址:https://www.sumatrapdfreader.org/free-pdf-reader.html 一个关系很好的同事推荐的pdf阅读器  之前用的感觉不错  每次都记不住  自己收 ...

  7. ES6中Fetch的封装及使用,炒鸡简单~

    之前写过一篇<ajax.axios.fetch之间的详细区别以及优缺点> 戳这里 1.封装 (http.js) class Ajax { get(url) { return new Pro ...

  8. 【原】react+redux实战

    摘要:因为最近搞懂了redux的异步操作,所以觉得可以用react+redux来做一个小小的项目了,以此来加深一下印象.切记,是小小的项目,所以项目肯定是比较简单的啦,哈哈. 项目效果图如图所示:(因 ...

  9. 在react+redux+axios项目中使用async/await

    Async/Await Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Pr ...

随机推荐

  1. [MySQL复制] SQL_ERROR 1032解决办法(non-gtid env)

    一.缘由: 在主主同步的测试环境,由于业务侧没有遵循同一时间只写一个点的原则,造成A库上删除了一条数据,B库上在同时更新这条数据. 由于异步和网络延时,B的更新event先到达A端执行,造成A端找不到 ...

  2. Zabbix添加Ping外网IP监控

    1.先添加一个HOST,只填写IP即可,如10.1.1.1 2.选择一台客户端,新建item,如下: 3.新建trigger: 注:icmpping[<target>,<packet ...

  3. 【转】Linxu学习---top实践

    [原文]https://www.toutiao.com/i6591053058258502147/ 在实际开发中,有时候会收到一些服务的监控报警,比如CPU飙高,内存飙高等,这个时候,我们会登录到服务 ...

  4. Vmware Vcenter6.5 全新安装及群集配置介绍

    转 Vmware Vcenter6.5 全新安装及群集配置介绍 2016年12月31日 14:27:12 ccitzy01 阅读数:97772 标签: vmware   [摘要] VMwarevCen ...

  5. postgresql+postgis+pgrouting实现最短路径查询(1)---线数据的处理和建立拓扑

    准备一个线shp数据,并将其导入postgres里面,postgres安装postgis和pgrouting两个插件(方法见http://www.cnblogs.com/nidaye/p/455352 ...

  6. 谁对EXTJS熟悉,有关关闭panel的问题?

    谁对EXTJS熟悉,有关关闭panel的问题?比如:我在A.js 中写了一个  var  win  =   new  Ext.Window( { b.js });   win.show(); 打开了一 ...

  7. os.path.md

    os.path 我们可以利用os.path模块提供的函数更容易地在跨平台上处理文件. 即使我们的程序不是用于夸平台, 也应该使用os.path来让路径名字更加可靠. Parsing Paths os. ...

  8. js面对对象编程(二):属性和闭包

    上篇博客中解说了一些js对象的基本概念和使用方法.这篇博客解说一下js属性方面的:公有属性.私有属性,特权方法. 假设学过java.公有属性.私有属性,特权方法(即能够訪问和设置私有属性的方法)一定非 ...

  9. Nowcoder 提高组练习赛-R2

    https://www.nowcoder.com/acm/contest/173#question T1:https://www.nowcoder.com/acm/contest/173/A 题意概述 ...

  10. text/html & text/plain的区别

    需要了解的概念 Content-Type:用于定义用户的浏览器或相关设备如何显示将要加载的数据,或者如何处理将要加载的数据 MIME:MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型 ...