前端知识 | Redux的使用

什么是 Redux?

Redux 是整个项目的状态管理中心,数据存储仓库,集中式的存储和管理所有的组件的状态,并且可以让组件的状态以一种可预测的方式变化。

什么情况下使用 Redux?

Redux 主要作为一个状态树的存在,主要作用可以用来集中管理共享数据,如果你想取某个数据,你就直接从状态树(store)上拿,你修改数据,其他页面上从状态树上取到的数据也会发生改变(如果你用了 subscribe 监听函数或者使用了 react-redux 类似的库帮你监听,则其他页面取到的数据会自动更新),Redux 不是必须的,它的使用场景是当你觉得项目内的组件通信太过于繁琐的时候使用,比如你有很多页面,很多组件,他们之间的通信很麻烦,或者说有些数据你需要保存起来供所有组件使用,这时候 Redux 的作用就体现出来了。

正如 Redux 的作者所说:

Flux架构就像眼镜:您自会知道什么时候需要它。

核心概念

action

action 是一个对象,它包含了引起 store 状态变化的行为,他是将数据运输至 store 里的唯一手段。它通常包含一个 type 属性和一个需要传入 store 的数据,数据类型可以自定义。比如我们在做用户登录的时候经常需要将用户信息保存到 Redux,这时候 action 就可以是:

reducer

action 仅仅申明了我们想要改变 store 以及附带的数据,那么我们到底怎么去改变数据呢,比如说有一天用户的 money 变为2000,那么传入的 action 是:

那么这时候我们要怎么取改变 store 里面的值呢?这时候就要用到 reducer

简单来说,reducer 就是根据传入 actioon 类型描述如何去更改 store 中的状态。

store

单一状态树

action 描述了更改数据行为的发生,reducer 描述了如何去更改数据,那么我们数据还要有一个归宿就是 store,Redux 的核心就是一个 store 对象,它里面包含着我们所储存的所有状态,它类似一个物流中心,我们可以往里面存放数据,也可以从里面取出数据。它提供的方法包括:

1、getState() 获取当前的的 state 状态值

2、dispatch(action) 派发一个 action 行为更新 state

3、subscribe(listener) 注册一个监听器(当 state 跟新完了之后会自动执行)

这样这三个东西就串联在一起了。

store.dispatch(action) 用来接收不同的 action,表明要更新 state 的 type 类型以及更新需要的数据,再通过 reducer 函数计算到底怎么去更改 state,加还是减。

说了这么多,我们最后上个例子吧:

app.js


action.js


reducer.js


store.js


PS:这是最原始的 redux 使用方法,在实际开发中,通常还会结合 create-redux 等插件一起使用。



-END-

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

推荐阅读更多精彩内容