前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >redux基础

redux基础

作者头像
踏浪
发布2019-07-31 10:38:27
4470
发布2019-07-31 10:38:27
举报
文章被收录于专栏:踏浪的文章踏浪的文章

redux概念简介

redux是一个专门用于处理数据的第三方库(插件),作用是使MVM,MVVM等框架使用起来视图与控制层更加明显。很多人听到redux都是因为react-redux这一个插件。其实react-redux只是redux的一部分而已。

redux就像Jquery一样,可以在任何的地方使用,只要你用得到他,就像最开始说的,他就是一个插件而已。

redux的三大要素

redux用来处理数据,存在三大要素

redux
redux

如上面图上所示,redux存在三个重要的概念

  • action
  • reducer
  • store

store

store的英文的意思是有:贮存, 贮备, 储藏, 存放。所以,我们这里的store也是如此,我们可以把吧他比作是一个仓库。这个仓库的作用就是把所有的我们需要的数据存在起来。拿react举例(这里假如你已经了解过react了),react中的所有的数据都是存放在这个仓库里面。一个项目只有唯一的一个store。

同样是以react为例,那么store里面究竟存放的是什么呢?

我们知道,在react中,我们控制一个组件是通过这个组件内部的state状态来实现的,如果我们需要修改一个组件的状态,那么我们就需要通过react的setState方法来实现,修改组件的状态。那么在redux的store中,这个仓库中存在的就是整个项目的state。当然,这里的整个项目的state可以是一个,也可以是无数个(即每一个组件单独的状态),仓库中的数据取决于你的项目。

reducer

reducer的英文的意思是:减速器,减压器,还原剂的意思。那么在这里,他表示的是什么呢?其实这里我们也可以把它看做是还原(剂)的意思。即:还原。

那么他是还原的是什么呢?在react里面,还原的就是state。

在redux里面,reducer其实就是一个函数,一个纯函数(给定一个输入,必有有且只有一个唯一的输出)拿函数来,输入就是函数的参数,输出就是函数的返回值。

在redux里面,每一个reducer的输入都有:状态参数(action)以及目前的state。返回值是一个新的state状态值。这就把react中的state单独剥离出来了。

上面说到的store,里面就同时也存放了这些reducer。

那么store是怎么来的呢。我们使用redux提供的createStore方法来创建store。

代码语言:javascript
复制
let store = crateStore(reducers)

所有的reducer我们都需要绑定在一起,使用redux提供的combineReducers把每一个reducer合并成一个对象。

代码语言:javascript
复制
import { combineReducers } from 'redux';
const reducders = combineReducers({
  reducer1,
  reducer2,
  ......
})

action

action的意思是:动作,操作。这里也是一样,就是一个动作。

我们在说reducer的时候提到了action,action非常简单,我们就把他理解为一个信号表示。为了让程序读懂我们究竟是需要做什么样的动作,我们需要给action提供一个属性,表示他是整个项目中为一个那一个。这个属性就是:type。我们还可能给这个action添加一个其他的属性,那么这个action就成了一个对象了。比如:

代码语言:javascript
复制
{
  type: 'ADD_TODO',
  text: '添加一个新的todo代办项'
}

但是这样写的话用起来可能会很麻烦,而且text属性无法进行扩展,所以,在使用action的时候,我们通常还是把它写成一个函数。即:

代码语言:javascript
复制
function addTodo(text){
  return {
    type: 'ADD_TODO',
    text
  }
}

# 使用ES6的写法
const addTodo = text => {type: 'ADD_TODO', text}

这就是一个action。

简单的梳理

我们用这样一个例子来简单的梳理一下原理。

在一个图书馆里面,有许多的书,他们有的被借阅了,有的仍然在书架上面放着,这些书的状态都在图书馆的电子屏幕上面显示着。这里的图书的是否被借阅的状态我们可以看做是一个state。有三个人甲,乙,丙,甲需要去借书A,借完书以后我们需要让乙和丙都知道图书被借阅了。电子屏幕上面的图上A的状态就会发生变化,即state的值发生了变化。这时候甲乙丙三个人都知道了图书A的状态了。这里的甲乙丙三个人可以看做是react中的组件。

但是上面的存在一个问题,甲去借书,不可能借完书就走了,或者直接就去拿书了。这时候我们需要有一个管理者,即reducer。他来判断甲是否可以借书,即他来控制图书A的状态而不是甲乙丙(组件)控制图书A的状态。

其次就是甲怎么让管理者知道我要借的书是A而不是其他的呢?这时候就需要一个为一个标识(action)。{type: ‘A’, name: ‘图书A’}。怎么让管理员知道呢?redux提供了createStore方法,这个方法返回了一个方法dispatch,分发的意思。接收一个action,即store.dispatch(action),执行之后,管理员修改了图书A的状态。

最后,乙和丙怎么知道图书A的状态发生了变化呢?同样,edux提供了createStore方法,这个方法返回了一个方法subscribe,订阅的意思。乙和丙需要订阅图书A的信息才可以接收到图书A的状态变化,即store.subscribe(reducer)

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-01-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • redux概念简介
  • redux的三大要素
    • store
    • reducer
    • action
    • 简单的梳理
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档