前端知识|Redux的使用-创新互联

什么是 Redux?

成都创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站制作、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的伍家岗网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

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

什么情况下使用 Redux?

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

正如 Redux 的作者所说:

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

核心概念

action

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

前端知识 | Redux的使用

reducer

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

前端知识 | Redux的使用

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

前端知识 | Redux的使用

简单来说,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-

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


当前名称:前端知识|Redux的使用-创新互联
路径分享:http://scyanting.com/article/ddjhii.html