摘要

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. solr学习笔记-开篇

    由于工作需要,近期接触了一下全文检索的相关技术,从lucenen到solr开始慢慢一路摸爬滚打,仅以此文记录自己的学习里程和记录下各种坑. 本次学习基于以下环境版本: java7,solr5.5.4( ...

  2. [转] (CQRS)命令和查询责任分离架构模式（二） 之 Command的实现

    概述 继续引用上篇文章中的图片(来源于Udi Dahan博客),UI中的写入操作都将被封装为一个命令中,发送给Domain Model来处理. 我们遵循Domain Driven Design的设计思 ...

  3. 积累一些不太常用的c语言知识（不断更新）

    这里积累一些日常编程用得比较少的知识,不断添加. scanf("%c%*c%c",&a,&b); 其中的*表示跳过,本来输入三个数字,结果中间那个读入后被抛弃,a和 ...

  4. 不带插件 ，自己写js，实现批量上传文件及进度显示

    今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是 ...

  5. JAVA IO流结构图

    InputStreamReader和OutputStreamWriter分别继承自java.io包中的Reader和Writer,对他们中的抽象的未实现的方法给出实现.如: public int re ...

  6. TCP/IP三次握手，四次断开

    在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接. 第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认: SYN: ...

  7. .Net程序调试与追踪的一些方法

    前言 作为一个.net开发工程师,不管是在写桌面程序.服务程序或web程序,在开发阶段,我们必须非常熟悉vs的动态调试技能,当然web程序可能还需要调试前端的脚本或样式,这不在本文的讨论范围.本文主要 ...

  8. Pycharm创建的virtualenv环境缺失pip.exe的问题（Windows系统）

    Windows环境: 1. Python安装在d:\Python\Python35下, Python新版本安装时默认会勾选pip功能 2. PyCharm的Settings中Create Virtua ...

  9. Binder的工作原理浅析

    在Android开发中,Binder主要用于Service中,包括AIDL和Messenger,其中Messenger的底层实现就是AIDL,所以我们这里通过AIDL来分析一下Binder的工作机制. ...

  10. HTTP通过请求和响应的交换达成通信

    1. 通过请求和响应的交换达成通信 首先我们来看一个HTTP请求报文: GET/index.htm HTTP/1.1 HOST : hacker.jp HTTP协议起始行开头的GET表示请求访问服务器 ...