摘要

Redux 数据流图

  1. View 层由React 控制, 根据state 变化 刷新渲染组件,作用是根据更新的数据重新渲染组件
  2. Stroe 层其实就是state存储器,作用是更新数据
  3. Dispatch 层根据action 更新 state, 作用是分发事件
  4. Action 层绑定action类型和参数,并传递给dispatcher, 作用是通知有事件发生

这样保证预知组件的每个动作,并对每个动作做出相应的更新变化。

实战

html 部分

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>demo</title>
</head>
<body>
<div id="container"></div> <script type="text/javascript" src="bundle/app.js"></script>
</body>
</html>

app.js

var Redux = require('redux');
var React = require('react');
var ReactDOM = require('react-dom'); // action creator
var addTodoActions = function(text){
return {
type: 'add_todo',
text: text
};
}; // reducers
var todoReducer = function(state, action){ if(typeof state === 'undefined'){
return [];
} switch(action.type){
case 'add_todo':
return state.slice(0).concat({
text: action.text,
completed: '未完成'
});
break;
default:
return state;
}
}; var store = Redux.createStore(todoReducer); var App = React.createClass({
getInitialState: function(){
return {
items: store.getState()
};
},
componentDidMount: function(){
var unsubscribe = store.subscribe(this.onChange);
},
onChange: function(){
this.setState({
items: store.getState()
});
},
handleAdd: function(){
var input = ReactDOM.findDOMNode(this.refs.todo);
var value = input.value.trim(); if(value)
store.dispatch(addTodoActions(value)); input.value = '';
},
render: function(){
return (
<div>
<input ref="todo" type="text" placeholder="输入todo项" style={{marginRight:'10px'}} />
<button onClick={this.handleAdd}>点击添加</button>
<ul>
{
this.state.items.map(function(item){
return <li>{item.text} | 完成状态: {item.completed}</li>;
})
}
</ul>
</div>
)
},
}); ReactDOM.render(
<App />,
document.getElementById('container')
);

【JAVASCRIPT】React + Redux的更多相关文章

  1. 【原】react+redux实战

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

  2. 【温故知新】—— React/Redux/React-router4基础知识&独立团Demo

    前言:React专注View层,一切皆组件:全部使用ES6语法,最新版本为React16. Redux是专注于状态管理的库,和react解耦:单一状态,单向数据流.[独立团github地址] 一.Re ...

  3. 【JAVASCRIPT】React学习-JSX 语法

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...

  4. 【JAVASCRIPT】React 学习 - 登录实战

    摘要 实现一个登录的react 组件, 包含组件更新.ajax 交互.渲染新组建. 代码 <head> <meta charset="utf-8"> < ...

  5. 【JAVASCRIPT】React入门学习-文本渲染

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 文本渲染 1. 纯文本渲染 <!DOCTYPE html> <html> <head&g ...

  6. 【JAVASCRIPT】React学习-如何构建一个组件

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 组件化思想 组件就是 UI + UI 交互逻辑,组件有三个常规map , 分别为state 状态 . props 数据 ...

  7. 【JAVASCRIPT】React学习- 数据流(组件通信)

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 一 组件通信如何实现 父子组件之间不存在继承关系 1.1 父=>子通信 父组件可以通过 this.refs.xx ...

  8. 【JAVASCRIPT】React学习- 与 flux 结合使用

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 与flux 结合使用

  9. 【JAVASCRIPT】React学习-组件生命周期

    摘要 整理组件加载过程,详细见官方文档:https://facebook.github.io/react/docs/react-component.html mount 过程 1)constructo ...

随机推荐

  1. 转发:Ubuntu软件卸载安装的命令

    说明:由于图形化界面方法(如Add/Remove... 和Synaptic Package Manageer)比较简单,所以这里主要总结在终端通过命令行方式进行的软件包安装.卸载和删除的方法. 一.U ...

  2. javascript的setTimeout()与setTimeout()方法用法总结

    setTimeout与setInterval的区别: setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code ...

  3. 在VMware上安装ubuntu,并且SecureCRT远程连接

     工具: VMware:VMware-workstation-full_12.5.5.17738.exe Ubuntu镜像:ubuntu-16.04-server-amd64.iso 远程连接工具-- ...

  4. React+Redux开发实战项目【美团App】,没你想的那么难

    README.md 前言 开始学习React的时候,在网上找了一些文章,读了官网的一些文档,后来觉得React上手还是蛮简单的, 然后就在网上找了一个React实战的练手项目,个人学完之后觉得这个项目 ...

  5. cat和tac的用法

    1.cat和tac的功能 cat从前往后显示文本文件内容tac与cat相反,从后往前显示文本文件内容 2.cat用法 $cat [-AbEnTv] [filename]选项与参数:-A :相当于 -v ...

  6. IIS虚拟目录与UNC路径权限初探

    最近在一个项目中涉及到了虚拟目录与UNC路径的问题,总结出来分享给大家. 问题描述 某客户定制化项目(官网),有一个图片上传的功能.客户的Web机器有10台,通过F5负载均衡分摊请求. 假设这10台机 ...

  7. 关于tween.js 封装的方法

    今天做的是匀速情况下div的运动.首先开始之前先了解运动的原理 A------------>>BA移动到B 这段距离是总距离 用一个变量保存下来:var dA移动到B 移动的总次数  用一 ...

  8. Linux: 安装NVIDIA显卡驱动

    Linux(Fedora25, 64bit)台式机配备了NVIDIA显卡GTX950,但是仅仅使用开源驱动nouveau,无法发挥NVIDIA显卡的性能,所以可以考虑使用官方提供的显卡驱动. # 先安 ...

  9. Web开发资料

    慢慢更新 1. Quackit 墙裂推荐!提供了一系列教程,bootstrap的模板也很好用. 2. Bootstrap 4 Cheat Sheet 好用,比官网更加一目了染.  3.Chart. ...

  10. VB6之GDI+加载PNG图片

    原生的VB6不支持PNG个图片,因为刚有VB的时候还没有PNG的概念呢.不过,利用GDI+加载解析个PNG简直是砍瓜切菜般简单. GDI+的模块是我在网上下载的,地址应该是:http://vistas ...