redux基础

redux概念简介

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

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

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。

1
let store = crateStore(reducers)

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

1
2
3
4
5
6
import { combineReducers } from 'redux';
const reducders = combineReducers({
reducer1,
reducer2,
......
})

action

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

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

1
2
3
4
{
type: 'ADD_TODO',
text: '添加一个新的todo代办项'
}

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

1
2
3
4
5
6
7
8
9
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)

文章作者: 踏浪
文章链接: https://www.lyt007.cn/技术/redux基础.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 踏浪
支付宝
微信打赏