【Redux】—入门(基本用法)

一、基本概念

1.Store

Store 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。

store对象的生成

2.State

Store对象包含所有数据。如果想得到某个时点的数据,就要对 Store 生成快照。

这种时点的数据集合,就叫做 State。

当前时刻的 State,可以通过store.getState()拿到。

state的获取

3.Action

State 的变化,会导致 View 的变化。但是,用户接触不到 State,只能接触到 View。所以,State 的变化必须是 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。

Action 是一个对象。其中的type属性是必须的,表示 Action 的名称。其他属性可以自由设置。

action数据格式

4.Action Creator

如下,addTodo就是一个Action Creator:

Action Creator基本形式

5.store.dispatch()

store.dispatch()是 View 发出 Action 的唯一方法

dispatch的基本方式


结合Action Creator的dispatch方式

6.Reducer

Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer

Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。

reducer基本形式

实际应用中,Reducer 函数不用像上面这样手动调用,store.dispatch方法会触发 Reducer 的自动执行

为此,Store 需要知道 Reducer 函数,做法就是在生成 Store 的时候,将 Reducer 传入createStore方法。

将reducer函数告知store

如上创建store对象后,以后每当store.dispatch发送过来一个新的 Action,就会自动调用 Reducer,得到新的 State。

【扩展】

为什么这个函数叫做 Reducer 呢?因为它可以作为数组的reduce方法的参数。

附reduce执行步骤:

actions.reduce(reducer,0)

reducer(state,action)

0作为第一个传入的参数,即,初始的state === 0,action === {type:'ADD',payload:0},执行后,返回值赋给state,继续取actions数组下一个成员,action === {type:'ADD',payload:1},直到数组项全部取出,执行完毕。total最终等于3。

7.纯函数

Reducer 函数最重要的特征是,它是一个纯函数。也就是说,只要是同样的输入,必定得到同样的输出。

由于 Reducer 是纯函数,就可以保证同样的State,必定得到同样的 View。

但也正因为这一点,Reducer 函数里面不能改变 State,必须返回一个全新的对象,请参考下面的写法:

【注意】

最好把 State 对象设成只读。你没法改变它,要得到新的 State,唯一办法就是生成一个新对象。

这样的好处是,任何时候,与某个 View 对应的 State 总是一个不变的对象。

8.store.subscribe()

Store 允许使用store.subscribe方法设置监听函数,一旦 State 发生变化,就自动执行这个函数。

【设置监听】

设置监听

state发生变化,会自动执行listener。

【注意】

store.dispatch() ——> reducer自动执行 ——> state更新 ——> listener自动执行

显然,只要把 View 的更新函数(对于 React 项目,就是组件的render方法或setState方法)作为listener,就会实现 View 的自动渲染。listener可以通过store.getState()得到当前状态,这时可以setState(newState)。

【解除监听】

解除监听


二、Store的实现

import { createStore } from 'redux';

let store = createStore(reducer);

createStore方法还可以接受第二个参数,表示 State 的最初状态。这通常是服务器给出的。

let store = createStore(reducer, window.STATE_FROM_SERVER);

window.STATE_FROM_SERVER就是整个应用的状态初始值。

【注意】

如果提供了这个参数,它会覆盖 Reducer 函数的默认初始值。

【createStore方法的简单实现】

createStore方法的简单实现


三、Reducer 的拆分

1.概述

一个大的reducer

由于,不同的action改变state不同的三个属性,并且,这三个属性之间没有联系,因此可以将这个reducer进行拆分。


reducer的拆分

【说明】

chatLog、statusMessage、userName是三个小的reducer。

当总的reducer被调用,传入action,小的reducer会被逐个执行。

每个小reducer执行,都会返回一个state:

(1)如果传入的action,在当前的小reducer中,成功匹配到case,则对state进行更新后,返回新的state。

(2)如果传入的action,在当前的小reducer中,没有匹配到case,则走default,原封不动的返回state。

总reducer返回值是一个对象,格式为,{reducerName1:state1,reducerName2:state2 ......}

【注意】

总reducer返回的对象里,只有一个reducerName对应的是新的state(如果state的处理,按照上例的逻辑,返回Object.assign({ },state)),其他reducerName对应的都是旧的state,且指向同一地址。


2.【使用combineReducer进行reducers的合并】

使用combineReduce

【注意】

*上述写法要求,State 的属性名必须与子 Reducer 同名。

【个人理解】

这个要求是由es6对象的简写写法+combineReducer的执行机制,共同造成的。

(1)es6里,{chatLog,statusMessage,userName} 等同于 {chatLog:chatLog,statusMessage:statusMessage,userName:userName}

(2)combineReducer执行机制:当store.dispatch,会触发合成后的reducer(即chatReducer)自动执行。chatReducer执行,返回的是

{

chatLog:chatLog(state.chatLog,action),

statusMessage:statusMessage(state.statusMessage,action),

userName:userName(state.userName,action)

}

这里,state.依次读取的属性名,就是传入combineReducer的对象的属性名。

*如果State 的属性名与子 Reducer 不同名,就要采用下面的写法。

再次理解combineReducer执行机制:

当store.dispatch触发总reducer自动执行时,传入combineReducer的每一个子reducer会依次执行、逐个执行。而传入子reducer的参数,就是state.[子reducer对应的key]和action。


3.combineReducer的简单实现


combineReducer的简单实现


4.实际使用

你可以把所有子 Reducer 放在一个文件里面,然后统一引入。


四、栗子(计数器)


#整理自http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,029评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,238评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,576评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,214评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,324评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,392评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,416评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,196评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,631评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,919评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,090评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,767评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,410评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,090评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,328评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,952评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,979评论 2 351

推荐阅读更多精彩内容

  • 学习必备要点: 首先弄明白,Redux在使用React开发应用时,起到什么作用——状态集中管理 弄清楚Redux是...
    贺贺v5阅读 8,885评论 10 58
  • React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案。有两个方面,它没涉及。 代码结构 组件...
    珍珠林阅读 8,409评论 3 6
  • http://gaearon.github.io/redux/index.html ,文档在 http://rac...
    jacobbubu阅读 79,937评论 35 198
  • 前言 本文 有配套视频,可以酌情观看。 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我讨论。 文中所有内...
    珍此良辰阅读 11,901评论 23 111
  • 一、什么情况需要redux? 1、用户的使用方式复杂 2、不同身份的用户有不同的使用方式(比如普通用户和管...
    初晨的笔记阅读 2,025评论 0 11