Redux系列01:从一个简单例子了解action、store、reducer

本文作者:IMWeb 陈映平 原文出处:IMWeb社区 未经同意,禁止转载

先看例子

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

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![](http://7tszky.com1.z0.glb.clouddn.com/FnGW5bEWBsa95bu0YWVSRJTlmuls)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C语言及其他语言

[每日一题]C语言程序设计教程(第三版)课后习题5.4

题目描述 有三个整数a b c,由键盘输入,输出其中的最大的数。 输入 一行数组,分别为a b c 输出 a b c其中最大的数 样例输入 10 20 30 样...

2934
来自专栏编程

PLC编程优化方法,让程序运行提速!

PLC、DCS、仪器仪表、电气技术资料,一网打尽 通过本方法优化可以极大的减少程序语句数,使PLC程序更简洁、可读性更好,由于不需要做耗时的类型转换,程序运行效...

2149
来自专栏Linyb极客之路

如何避免自己写的代码成为别人眼中的一坨屎!

普通的工程师堆砌代码,优秀的工程师优雅代码,卓越的工程师简化代码。如何写出优雅整洁易懂的代码是一门学问,也是软件工程实践里重要的一环。笔者推荐三本经典的书籍《代...

1447
来自专栏LinkedBear的个人空间

设计模式笔记(一)——设计模式的引入与三大工厂模式

设计模式(Design Pattern)是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总...

682
来自专栏Java技术栈

Java 10的10个新特性,将彻底改变你写代码的方式!

Java 9才发布几个月,很多玩意都没整明白,现在Java 10又要来了。。 这时候我真尼玛想说:线上用的JDK 7 甚至JDK 6,JDK 8 还没用熟,JD...

4278
来自专栏小詹同学

为什么你的Python代码质量如此不堪……

作者:笑虎(Python爱好者,关注爬虫、数据分析、数据挖掘、数据可视化等) 原文链接:http://codebay.cn/post/7953.html

1714
来自专栏JavaEdge

设计模式实战 - 简单工厂

最可能给八卦炉下达什么样的生产命令呢? 应该是给我生产出一个黄色人种(YellowHuman类) 而不会是给我生产一个会走、会跑、会说话、皮肤是黄色的人种 ...

1205
来自专栏极客猴

Python 中各种时间类型的转换

我们编码过程中经常需要获取当前时间。当然, 这也离不开对时间类型进行转换运算。本文主要讲解 Python 各种时间类型之间的转换。

932
来自专栏平凡文摘

Java 8 最佳技巧

2193
来自专栏hrscy

202 - Swift 的核心是什么?

不知道大家有没有看过 WWDC 2015 的视频,其中有一个编号为 408 的视频解释了这个问题,下面是视频链接:Protocol-Oriented Progr...

1342

扫码关注云+社区

领取腾讯云代金券