摘要

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. 关于table 冻结 标头及列---js控制方法

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  2. placeholder属性兼容ie8

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 【转载】图文详解 IntelliJ IDEA 15 创建普通 Java Web 项目

    第 1 部分:新建一个 Java Web Application 项目 File -> New -> Project-,请选择 Java EE 这个模块下的 Web Application ...

  4. 为什么多线程、junit 中无法使用spring 依赖注入？

    为什么多线程.junit 中无法使用spring 依赖注入? 这个问题,其实体现了,我们对spring已依赖太深,以至于不想自己写实例了. 那么到底是为什么在多线程和junit单元测试中不能使用依赖注 ...

  5. navicat连接oracle 报 ORA-12737 set CHS16GBK

    1首先,我们打开“工具”-->"选项"菜单,见到如下界面,依据OCI library(oci.dll) 路径,导航到 navicat oci 目录下,备份里面的文件(通过在该 ...

  6. AngularJS高级程序设计读书笔记 -- 过滤器篇

    一. 过滤器基础 过滤器用于在视图中格式化展现给用户的数据. 一旦定义过滤器之后, 就可在整个模块中全面应用, 也就意味着可以用来保证跨多个控制器和视图之间的数据展示的一致性. 过滤器将数据在被指令处 ...

  7. 10分钟轻松学会python turtle绘图

     1. 画布(canvas) 1.1 相关函数: 2. 画笔 2.1 画笔的状态 2.2 画笔的属性 2.3 绘图命令 3. 命令详解 4. 绘图举例 4.1 太阳花 4.2 绘制小蟒蛇 4.3 绘 ...

  8. Angular中使用Swiper不能滑动的解决方法

    Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,很受很多设计师的欢迎. 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类, ...

  9. 增强学习 | AlphaGo背后的秘密

    "敢于尝试,才有突破" 2017年5月27日,当今世界排名第一的中国棋手柯洁与AlphaGo 2.0的三局对战落败.该事件标志着最新的人工智能技术在围棋竞技领域超越了人类智能,借此 ...

  10. test_markdown

    add modifications 非科学计数法显示数字 citation[^ref1] format bank% do not use scientific expression format lo ...