Redux 的设计思想很简单,就两句话:
Web 应用是一个状态机,视图与状态是一一对应的。
所有的状态,保存在一个对象里面。
在组件化的应用中(比如react、vue2.0等),会有着大量的组件层级关系,深嵌套的组件与浅层父组件进行数据交互,变得十分繁琐困难。而redux,站在一个服务级别的角度,可以毫无阻碍地(这个得益于react的context机制,后面会讲解)将应用的状态传递到每一个层级的组件中。redux就相当于整个应用的管家。
redux有三大准则
1、单一数据源 :
整个应用状态,都应该被存储在单一store的对象树中。
2、只读状态:
唯一可以修改状态的方式,就是发送(dispatch)一个动作(Action),通俗来讲,就是说只有getter,没有setter。
3、使用纯函数去修改状态
redux 的几个核心概念
(1)Action
Action是唯一可以改变状态的途径,服务器的各种推送、用户自己做的一些操作,最终都会转换成一个个的Action,而且这些Action会按顺序执行,这种简单化的方法用起来非常的方便。Action 是一个对象。其中的type属性是必须的,表示 Action 的名称:
const action = {
type: 'home',
msg: 'Write Document'
};
(2)Store
Store管理着整个应用的状态,Store提供了一个方法dispatch,这个就是用来发送一个动作,去修改Store里面的状态,然后可以通过getState方法来重新获得最新的状态,也就是state。
(3)Reducer
当dispatch之后,getState的状态发生了改变,Reducer就是用来修改状态的。Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。
const reducer = function (state, action) {
// ...
return new_state;
};
知道这些基本概念,我们来手动封装一个redux试试。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="store.dispatch({type:'COUNT_DECREMENT',num:1})">-</button>
<h1 id="count"></h1>
<button onclick="store.dispatch({type:'COUNT_INCREMENT',num:1})">