其实,redux的核心概念就是store、action、reducer,从调用关系来看如下所示

store.dispatch(action) --> reducer(state, action) --> final state

可以先看下面的极简例子有个感性的认识,下面会对三者的关系进行简单介绍

// reducer方法, 传入的参数有两个
// state: 当前的state
// action: 当前触发的行为, {type: 'xx'}
// 返回值: 新的state
var reducer = function(state, action){
switch (action.type) {
case 'add_todo':
return state.concat(action.text);
default:
return state;
}
}; // 创建store, 传入两个参数
// 参数1: reducer 用来修改state
// 参数2(可选): [], 默认的state值,如果不传, 则为undefined
var store = redux.createStore(reducer, []); // 通过 store.getState() 可以获取当前store的状态(state)
// 默认的值是 createStore 传入的第二个参数
console.log('state is: ' + store.getState()); // state is: // 通过 store.dispatch(action) 来达到修改 state 的目的
// 注意: 在redux里,唯一能够修改state的方法,就是通过 store.dispatch(action)
store.dispatch({type: 'add_todo', text: '读书'});
// 打印出修改后的state
console.log('state is: ' + store.getState()); // state is: 读书 store.dispatch({type: 'add_todo', text: '写作'});
console.log('state is: ' + store.getState()); // state is: 读书,写作

store、reducer、action关联

可以结合上面的代码来看下面几段解释

  1. store:对flux有了解的同学应该有所了解,store在这里代表的是数据模型,内部维护了一个state变量,用例描述应用的状态。store有两个核心方法,分别是getStatedispatch。前者用来获取store的状态(state),后者用来修改store的状态。

// 创建store, 传入两个参数
// 参数1: reducer 用来修改state
// 参数2(可选): [], 默认的state值,如果不传, 则为undefined
var store = redux.createStore(reducer, []); // 通过 store.getState() 可以获取当前store的状态(state)
// 默认的值是 createStore 传入的第二个参数
console.log('state is: ' + store.getState()); // state is: // 通过 store.dispatch(action) 来达到修改 state 的目的
// 注意: 在redux里,唯一能够修改state的方法,就是通过 store.dispatch(action)
store.dispatch({type: 'add_todo', text: '读书'});
  1. action:对行为(如用户行为)的抽象,在redux里是一个普通的js对象。redux对action的约定比较弱,除了一点,action必须有一个type字段来标识这个行为的类型。所以,下面的都是合法的action

{type:'add_todo', text:'读书'}
{type:'add_todo', text:'写作'}
{type:'add_todo', text:'睡觉', time:'晚上'}
  1. reducer:一个普通的函数,用来修改store的状态。传入两个参数 state、action。其中,state为当前的状态(可通过store.getState()获得),而action为当前触发的行为(通过store.dispatch(action)调用触发)。reducer(state, action) 返回的值,就是store最新的state值。

// reducer方法, 传入的参数有两个
// state: 当前的state
// action: 当前触发的行为, {type: 'xx'}
// 返回值: 新的state
var reducer = function(state, action){
switch (action.type) {
case 'add_todo':
return state.concat(action.text);
default:
return state;
}
};

关于actionAreator

看到xxCreator总能让人联想到工厂模式,没错,在redux里,actionAreator其实就是action的工厂方法,可以参考下面例子。

actionCreator(args) => action

var addTodo = function(text){
return {
type: 'add_todo',
text: text
};
}; addTodo('睡觉'); // 返回:{type: 'add_todo', text: '睡觉'}

在redux里,actionAreator并非是必需的。不过建议用actionAreator代替普通action对象的直接传递。除了能够减少代码量,还可以大大提高代码的可维护性。想象下面的场景

再来看回文章开头的例子,应用actionAreator后的代码示例。

store.dispatch(addTodo('睡觉'));
console.log('state is: ' + store.getState()); // state is: 读书,写作,睡觉

相关链接

redux中文文档:http://camsong.github.io/redux-in-chinese/index.html
redux英文文档:http://redux.js.org/index.html
redux源码解读:https://github.com/chyingp/redux-source-insight

Redux系列01:从一个简单例子了解action、store、reducer的更多相关文章

  1. Redux系列02:一个炒鸡简单的react+redux例子

    前言 在<Redux系列01:从一个简单例子了解action.store.reducer>里面,我们已经对redux的核心概念做了必要的讲解.接下来,同样是通过一个简单的例子,来讲解如何将 ...

  2. 一个简单例子:贫血模型or领域模型

    转:一个简单例子:贫血模型or领域模型 贫血模型 我们首先用贫血模型来实现.所谓贫血模型就是模型对象之间存在完整的关联(可能存在多余的关联),但是对象除了get和set方外外几乎就没有其它的方法,整个 ...

  3. (转)Java中使用正则表达式的一个简单例子及常用正则分享

    转自:http://www.jb51.net/article/67724.htm 这篇文章主要介绍了Java中使用正则表达式的一个简单例子及常用正则分享,本文用一个验证Email的例子讲解JAVA中如 ...

  4. 用Qt写软件系列三:一个简单的系统工具(上)

    导言 继上篇<用Qt写软件系列二:QIECookieViewer>之后,有一段时间没有更新博客了.这次要写的是一个简单的系统工具,需求来自一个内部项目.功能其实很简单,就是查看当前当前系统 ...

  5. [Ruby on Rails系列]6、一个简单的暗语生成器与解释器(上)

    [0]Ruby on Rails 系列回顾 [Ruby on Rails系列]1.开发环境准备:Vmware和Linux的安装 [Ruby on Rails系列]2.开发环境准备:Ruby on Ra ...

  6. C语言多线程的一个简单例子

    多线程的一个简单例子: #include <stdio.h> #include <stdlib.h> #include <string.h> #include &l ...

  7. quartz---的一个简单例子

    quartz---的一个简单例子 首先建立一个maven项目.jar工程即可.(提示:我前面有如何建立一个maven工程的总结以及maven环境的配置.) 1.建立好后点击到app中运行,--> ...

  8. 用socket.io实现websocket的一个简单例子

    socket.io 是基于 webSocket 构建的跨浏览器的实时应用. 逛博客发现几个比较好的 一.用socket.io实现websocket的一个简单例子 http://biyeah.iteye ...

  9. VS Extension+NVelocity系列(一)——构建一个简单的NVelocity解析环境

    一.前言 本节我们将实际实现一个简单的NVelocity解析环境,以便为以后的实例做一些基本工作,虽然NVelocity如何使用已经属于老掉牙的话题,但我只能专门挑出来一章来做铺垫.人生就是这样无奈啊 ...

随机推荐

  1. jboss eap6.1(5)(ejb升级)

    以前的项目是基于ejb2.x做的,ejb的配置文件为ejb-jar.xml和jboss.xml,现在把这个项目移到新版本服务器中的时候,报解析ejb-jar错误. 查阅许多资料才找到解决办法,原来jb ...

  2. EasyUI tree reload时更改参数的问题。

    [问题]很多时候,我们需要重新加载tree数据,不仅仅是简单地刷新,更多的是重定向了URL,其中就包括参数的调整. moduleTree = $('#tree').tree({ queryParams ...

  3. fab提供远程IP和账号密码

    #!/usr/bin/python #-*- coding: UTF-8 -*- from fabric.api import * from fabric.context_managers impor ...

  4. Python编写API接口

    要求通过http://192.168.50.74/aptest/calc/?a=aa&c=00&b=bb进行访问,参数a="aa",b="bb" ...

  5. PHP 定界符

    双引号和单引号是常用的字符串定界符,在php4.0以后 还可以使用字符串定界符<<<,功能和双引号差不多,用法如下 <<<标识符 字符串 标识符 其中最后的标识符必 ...

  6. 记录一次向TiDB数据库导入数据的例子

    导出数据 今天从Mysql的某个库中导出一个表大概有20分钟吧,等了一会终于导出成功了.查看一下文件的大小: [tidb@:vg_adn_CkhsTest ~]$du -h ./creative_ou ...

  7. .net core 入坑经验 - 2、MVC Core之获取网站运行路径

    这次是建立了asp.net mvc core项目,在controller中想获取网站在硬盘中的路径,找了一圈Server.MapPath() 已不存在,HttpContent也一样,经过查阅资料发现是 ...

  8. python difflib.md

    difflib 此模块提供了用于比较序列的类和函数.它可以用于例如比较文件,并且可以产生各种格式的差异信息,包括HTML和上下文以及统一差异. difflib 模块包含用于计算和处理序列间差异的工具. ...

  9. python第二十九课——文件读写(读取数据操作)

    演示读取数据操作:path=r'a.txt' 1.打开文件f1=open(path,'r') 2.读取数据content1=f1.read(3)print(content1) content1=f1. ...

  10. Invalid action class configuration that references an unknown class named [XX] .

    多次遇到这个错误,难以解决,有时候出现,有时候没有,很神奇,今天发现了一点端倪,虽然说不上找到了所有导致这个bug的原因.至少,也是很主要的一种了. 其实,透过结果,如果debug用心,一行代码一行代 ...