前端知识 | 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-

时间: 2024-10-12 15:23:34

前端知识 | Redux的使用的相关文章

Web 前端知识体系精简

Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉. JAVASCRIPT 篇 0.基础语法 Javascript基础语法包括:变量定义.数据类

web前端知识总结

1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识--做web前端需要的比这三大块要多得多. 拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来. 大家不要害怕,其实下文中的这个知识框架要比草图中的好看的多,草图大家权当没看见. 在看内容之前,先看一下这个知识框架的

移动前端知识的一些总结

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 ?html 代码<meta name="viewport" content="w

前端知识学习步骤

著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:龚一峰链接:https://www.zhihu.com/question/19862294/answer/44311692来源:知乎 css 编写规范 http://cssguidelin.es/ 前端性能优化的24种方法 http://browserdiet.com/en/ 学习js正确的方法 JS: The Right Way 很有趣的js编程教材(才出的) Eloquent JavaScript 设计师写的js入门教

web前端知识体系大全

1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识——做web前端需要的比这三大块要多得多. 拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来.说干就干.上午我就开始在办公室画草图,乱七八糟的在那儿理思路. 大家不要害怕,其实下文中的这个知识框架要比草图中的好看的

前端知识体系之入门篇总结(一)

利用国庆节时间,把前端学习的知识碎片进行了整理,希望能在前端之路继续努力. 前端是一个范围很大的概念,其领域包括在了计算系统中的方方面面,可以说所有与用户交互行为相关的程序开发工作都是前端的范围,这包括一个数字仪表的显示设计或者一个手机APP.通常意义上讲,前端指的是Web前端的开发工作,而学习前端也是从Web前端知识开始的. 这篇blog面向对前端没有入门或者已经有一定的网页编码技术但对于前端知识体系没有一个清晰条理的开发者,其要旨是整理一个普通网页开发过程中所能用到的知识点.与其它类似的教程

自己总结的web前端知识体系大全【欢迎补充】

1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候.突然有了一个想法. 想把整个web前端开发所须要的知识都之中在一个视图中,形成一个完整的web前端知识体系.目的是想要颠覆人们对于前端仅仅有三大块(html.css.js)的认识--做web前端须要的比这三大块要多得多. 拖了好几个月了,可是因为最近将要參加的某一个活动.我不得不这两天把这个东西整出来. 说干就干. 上午我就開始在办公室画草图,乱七八糟的在那儿理思路. 大家不要害怕.事实上下文中的这个知识框架要比草图

Web前端知识体系精简

Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉. JAVASCRIPT 篇 0.基础语法 Javascript基础语法包括:变量定义.数据类

Web前端知识技能大汇总

Web前端知识技能大汇总 来源:github 发布时间:2015-07-08 阅读次数:3432 28 项目起源 还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目.我们可以通过协作的方式来共同维护这个项目.Git的历史记录也可以见证前端行业的一些变迁. 可视化效果 前端开发知识结构 前端工程师 浏览器 IE6/7/8/9/10/11 (Trident) Firefo