React-10:redux状态管理库(数据)

redux

        强调的是,redux 与 react 并没有直接关系,它是一个独立的 JavaScript 状态管理库(数据),如果我们希望中 React 中使用 Redux,需要先安装 react-redux

知识点

        - 状态管理器

        - state 对象

        - reducer 纯函数

        - store 对象

        - action 对象

        - combineReducers 方法

        - react-redux

        - provider 组件

        - connect 方法

        - Redux DevTools extension 工具

        - 中间件 - middleware

        - redux-chunk


状态(数据)管理

        前端应用越来越复杂,要管理和维护的数据也越来越多,为了有效的管理和维护应用中的各种数据,我们必须有一种强大而有效的

        数据管理机制,也称为状态管理机制,Redux 就是解决该问题的

Redux

        Redux 是一个独立的 JavaScript 状态管理库,与非 React 内容之一

                https://www.bootcdn.cn/redux/

核心概念

        理解 Redux 核心几个概念与它们之间的关系

                - state

                - reducer

                - store

                - action

state 对象

        通常我们会把应用中的数据存储到一个对象树(Object Tree) 中进行统一管理,我们把这个对象树称为:state

state 是只读的

        这里需要注意的是,为了保证数据状态的可维护和测试,不推荐直接修改 state 中的原数据

通过纯函数修改 state

        什么是纯函数?

纯函数    (Reducer

        1. 相同的输入永远返回相同的输出

        2. 不修改函数的输入值

        3. 不依赖外部环境状态

        4. 无任何副作用

使用纯函数的好处    (特别单纯,里面没有可变的东西)

        1. 便于测试

        2. 有利重构

Reducer 函数

上面的 todo 函数就是 Reducer 函数

        1. 第一个参数是原 state 对象

        2. Reducer 函数不能修改原 state,而应该返回一个新的 state

        3. 第二参数是一个 action 对象,包含要执行的操作和数据

        4. 如果没有操作匹配,则返回原 state 对象


action 对象

        我们对 state 的修改是通过 reducer 纯函数来进行的,同时通过传入的 action 来执行具体的操作,action 是一个对象

                - type 属性 : 表示要进行操作的动作类型,增删改查……

                - payload属性 : 操作 state 的同时传入的数据

        但是这里需要注意的是,我们不直接去调用 Reducer 函数,而是通过 Store 对象提供的 dispatch 方法来调用

Store 对象

        为了对 state,Reducer,action 进行统一管理和维护,我们需要创建一个 Store 对象

Redux.createStore 方法

let store = Redux.createStore((state, action) => {

  // ...

}, []);

todo

        用户操作数据的 reducer 函数

[    ]

        初始化的 state

        我们也可以使用 es6 的函数参数默认值来对 state 进行初始化

let store = Redux.createStore( (state = [], action) => {

  // ...

} )

getState() 方法

        通过 getState 方法,可以获取 Store 中的 state

dispatch() 方法

        通过 dispatch 方法,可以提交更改,相当于打补丁,可以对store里的数据进行修改


action 创建函数

        action 是一个对象,用来在 dispatch 的时候传递动作和数据,我们在实际业务中可能会中许多不同的地方进行同样的操作,

        这个时候,我们可以创建一个函数用来生成(返回)action


subscribe() 方法    (可以用于react监听)

        可以通过 subscribe 方法注册监听器(类似事件),每次 dispatch action 的时候都会执行监听函数,该方法返回一个函数,

        通过该函数可以取消当前监听器

Redux 工作流


Reducers 分拆与融合

        当一个应用比较复杂的时候,状态数据也会比较多,如果所有状态都是通过一个 Reducer 来进行修改的话,那么这个 Reducer 

        就会变得特别复杂。这个时候,我们就会对这个 Reducer 进行必要的拆分

        我们把上面的 users、items、cart 进行分拆

combineReducers 方法

        该方法的作用是可以把多个 reducer 函数合并成一个 reducer

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

推荐阅读更多精彩内容