什么是Redux ?
“Redux 是 JavaScript 状态容器,提供可预测化的状态管理”
Redux 的设计思想很简单,就两句话:
1.Web 应用是一个状态机,视图与状态是一一对应的。
2.所有的状态,保存在一个对象里面。
redux有三大准则
1.单一数据源
整个应用状态,都应该被存储在单一store的对象树中。
2.只读状态
唯一可以修改状态的方式,就是发送(dispatch)一个动作(Action),通俗来讲,就是说只有getter,没有setter。
3.使用纯函数去修改状态,(纯函数是指 不依赖于且不改变它作用域之外的变量状态 的函数,也就是说, 纯函数的返回值只由它调用时的参数决定 ,它的执行不依赖于系统的状态(比如:何时、何处调用它)
redux的几个概念
(1)Action
Action是唯一可以改变状态的途径,服务器的各种推送、用户自己做的一些操作,最终都会转换成一个个的Action,而且这些Action会按顺序执行,这种简单化的方法用起来非常的方便。Action 是一个对象。其中的type属性是必须的,表示 Action 的名称:
const action = {
type: 'login',
payload: ...,
...
};
(2)Store
Store管理着整个应用的状态,store可以理解为一个存储数据的仓库,一个应用就这么一个仓库,但本质上这个store是一个对象。 Redux通过createStore这个函数,来生成store对象:
import { createStore } from 'redux';
const store = createStore(fn);
Store提供了一个方法dispatch,这个就是用来发送一个动作,去修改Store里面的状态
store.dispatch({
type: 'login',
payload: '...'
});
然后可以通过getState方法来重新获得最新的状态,也就是state。
简洁介绍 state
state就是当前的状态,那么store和state是什么关系呢? 我们可以认为 store 对象包括所有数据,如果想得到某个时点的数据,就要对 Store 生成快照。这种时点的数据集合,就叫做 State。
通过store.getState()我们可以得到某一时点的 state。
import { createStore } from 'redux';
const store = createStore(fn);
const state = store.getState();
Redux 规定, 一个 State 对应一个 View。只要 State 相同,View 就相同
简单的说:getState() 会返回当前的state树。(当前很重要)。 即state是当前数据的状态。
(3)Reducer
当dispatch之后,getState的状态发生了改变,Reducer就是用来修改状态的。Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。
const reducer = function (state, action) {
// ...
return new_state;
};
借鉴一张图来形容他们的关系:
什么时候需要rudux?
简单说,如果你的UI层非常简单,没有很多互动,Redux 就是不必要的,用了反而增加复杂性。
1.用户的使用方式非常简单
2.用户之间没有协作
3.不需要与服务器大量交互,也没有使用 WebSocket
4.视图层(View)只从单一来源获取数据
上面这些情况,都不需要使用 Redux。
用户的使用方式复杂
1.不同身份的用户有不同的使用方式(比如普通用户和管理员)
2.多个用户之间可以协作
3.与服务器大量交互,或者使用了WebSocket
4.View要从多个来源获取数据
上面这些情况才是 Redux 的适用场景:多交互、多数据源。
从组件角度看,如果你的应用有以下场景,可以考虑使用 Redux。
1.某个组件的状态,需要共享
2.某个状态需要在任何地方都可以拿到
3.一个组件需要改变全局状态
4.一个组件需要改变另一个组件的状态