【JAVASCRIPT】React + Redux
摘要
Redux 数据流图
- View 层由React 控制， 根据state 变化 刷新渲染组件，作用是根据更新的数据重新渲染组件
- Stroe 层其实就是state存储器，作用是更新数据
- Dispatch 层根据action 更新 state， 作用是分发事件
- 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的更多相关文章
- 【原】react+redux实战
摘要:因为最近搞懂了redux的异步操作,所以觉得可以用react+redux来做一个小小的项目了,以此来加深一下印象.切记,是小小的项目,所以项目肯定是比较简单的啦,哈哈. 项目效果图如图所示:(因 ...
- 【温故知新】—— React/Redux/React-router4基础知识&独立团Demo
前言:React专注View层,一切皆组件:全部使用ES6语法,最新版本为React16. Redux是专注于状态管理的库,和react解耦:单一状态,单向数据流.[独立团github地址] 一.Re ...
- 【JAVASCRIPT】React学习-JSX 语法
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...
- 【JAVASCRIPT】React 学习 - 登录实战
摘要 实现一个登录的react 组件, 包含组件更新.ajax 交互.渲染新组建. 代码 <head> <meta charset="utf-8"> < ...
- 【JAVASCRIPT】React入门学习-文本渲染
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 文本渲染 1. 纯文本渲染 <!DOCTYPE html> <html> <head&g ...
- 【JAVASCRIPT】React学习-如何构建一个组件
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 组件化思想 组件就是 UI + UI 交互逻辑,组件有三个常规map , 分别为state 状态 . props 数据 ...
- 【JAVASCRIPT】React学习- 数据流（组件通信）
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 一 组件通信如何实现 父子组件之间不存在继承关系 1.1 父=>子通信 父组件可以通过 this.refs.xx ...
- 【JAVASCRIPT】React学习- 与 flux 结合使用
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 与flux 结合使用
- 【JAVASCRIPT】React学习-组件生命周期
摘要 整理组件加载过程,详细见官方文档:https://facebook.github.io/react/docs/react-component.html mount 过程 1)constructo ...
随机推荐
- JavaScript设计模式_05_发布订阅模式
发布-订阅模式,定义了对象间的一种一对多的依赖关系,当一个对象的状态发生变化时,所有依赖它的对象都将得到通知.发布-订阅模式是使用比较广泛的一种模式,尤其是在异步编程中. /* * pre:发布-订阅 ...
- [转]TOMCAT配置多端口
一.Tomcat 安装后本身提供了一个server,端口配置默认是8080,对应目录为:..\Tomcat 6.0\webapps二.Tomcat 6.0 配置多个端口,其实也就是给Tomcat增加几 ...
- h5、jq 移动端评论点攒功能
h5.jq 移动端评论点攒功能 平时做的项目中大部分都会涉及到评论的功能,之前用angular写的项目,功能写起来很方便,但是对于一个单页来说,angular有点大材小用了,所有今天分享一个关于jq制 ...
- Win10 & Linux Docker 安装使用
Docker最近推出了可以运行在Win10和Mac上的稳定版本,让我们赶紧来体验一下. 一.Windows Docker 安装 1.安装 需要的条件为: 64bit Windows 10,开启Hype ...
- 基于TFS的.net技术路线的云平台DevOps实践
DevOps是近几年非常流行的系统研发管理模式,很多公司都或多或少在践行DevOps.那么,今天就说说特来电云平台在DevOps方面的实践吧. 说DevOps,不得不说DevOps的具体含义.那么,D ...
- CSS学习笔记10 相对定位，绝对定位与固定定位
文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...
- 【Android Developers Training】 100. 使用Intent修改联系人数据
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- Openfire的web插件开发
概要 Openfire不仅支持普通插件开发,还支持完整的web插件开发,这次就web插件开发做一个小的实例,本文主要讲解如何加入Servlet和Jsp页面,基本插件的开发请参照上一篇文章. 准备 系统 ...
- net 中web.config单一解决方法 （其他配置引入方式）
近期一个项目需要写许多的配置项,发现在单个web.config里面写的话会很乱也难于查找 所以搜了一下解决了,记录下来 一. webconfig提供了引入其他config的方式 <conne ...
- 读书共享 Primer Plus C-part 8
第十三章 文件输入/输出 fopen--fclose fopen 是文件的操作的开始 fclose是文件操作的结束 getc--putc getchar--putchar getc对应文件的获取单个字 ...