Redux入门0x101:简介及`redux`简朴完成

0x000 概述

这一章最先讲redux，实际上是承接前面的react，但实在作为一个框架来讲，redux和react并没有太多的关联，自身是自力存在的。在我看来它们的关联不会比共用re开首更深了，所以我就从新开了一个头，但实际上是基于前面写的&＃8230;

0x001 redux资本

• 中文文档
• 英文文档
• 官方视频

0x002 进修进程

当初为了进修redux，看了很多的材料，半途曾摒弃两次，然则末了照样英勇的拿起了它，如今终究委曲弄懂。

• 第一次是人人都说redux牛逼，所以就打算进修一下，看了很多遍了redux中文文档，也看了英文文档&＃8211;由于有些demo老是跑的不成功，怕是中文更新不实时的缘由。但末了照样不了了之，由于不晓得用它来干啥，反倒弄出了一堆的reducer、action之类的东西。
• 第二次是在做毕业设计的时刻，做了一个相似看板一样的api自动测试及机能统计分析项目&＃8211;相似postman，在这里遇到了一些超等辣手的题目，个中的最大的题目就是组件间通信和一致的状况治理。由于是有一个超等庞杂的组件操纵体式格局和组件嵌套，在做组件间通信的时刻，为了坚持状况的一致性，不停的将事宜和属性一层一层往下传、或许往上传。真是蹩脚的回想啊&＃8230;&＃8230;. 当时用的是Angular2。而我为了处置惩罚这个题目，写了一套基于定阅-宣布形式的事宜关照框架，原本想处置惩罚这些题目，结果，确切处置惩罚了组件间通信和一致状况治理的题目，然则终究带来的确切越发庞杂的事宜治理和越发无无序的组件关联&＃8230;.
• 厥后运用vue+vuex做了一些项目，反倒是倏忽意会的redux的头脑，就最先了第三次的进修，直到如今，我觉轻微缓解了我在前端项目所遭到的危险，redux的文档有点像天主视角，他彷佛在说，我晓得你应当晓得的，所以我这么说你应当晓得，实在我不懂。所以我要从伟人视角说说redux，拨开他的神袍，看看他的胸毛......

0x003 再说一些空话

在前面react的文章中，我一直在反复react中都是js，就是为了把头脑引回react的实质，react是基于js写的一个框架罢了，只是一个框架，并非一门自力的言语。很多人老是用了jQuery就忘了原生，用了React就忘了jQuery和原生。而来了redux，就必须和react绑定。这是一个极大的头脑误区，从个别上来讲，vue是自力的、自在的，react也是自力的、自在的，redux也是自力的、自在的。

的确有redux在react中的最好实践，却相对没有redux的唯一实践这类说法，在js的天下中，各大框架各放异彩，他们既可以兼容并济，也可以互相排挤，不过就是js中的一员罢了。每一个框架就像每一个人一样，有本身的特性，react可以构建ui，redux可以治理状况，axios在行收集，angular啥都行！你可以在vue中运用redux，也可以在vue中运用jQuery，以至也可在你本身的项目中同时运用vue和react，言语也好，框架也罢，都是为了向巨大航路进发而效劳的。

一句话总结：自在，然后次序，接着是人间万物。

0x004 定阅-宣布形式

redux实质上也是基于定阅-宣布形式的产品（我记得没错的话，假如记错了，以后返来改），和我写的谁人小框架一样&＃8230;..，所以在运用redux之前，先来研究一下这个形式，看看我之前写的谁人小东西：

let eventMap = {}
class MyEvent {
/**
* 宣布一个事宜并附带一份数据
*
* @param name 宣布的事宜名
* @param data 附带的数据
*/
static pub(name, data) {
if (!eventMap.hasOwnProperty(name)) return
let callbacks = eventMap[name]
if (callbacks.length === 0) return
callbacks.forEach((callback) => {
callback(data)
})
}
/**
* 定阅一个事宜并附带一个回调
* 申明这个事宜发作的时刻所要做的事变
*
* @param name 定阅的事宜称号
* @param callback 回调
* @returns {function(): *} 返回一个函数, 实行这个函数将会作废定阅
*/
static sub(name, callback) {
let callbacks = []
if (eventMap.hasOwnProperty(name)) {
callbacks = eventMap[name]
}
callbacks.push(callback)
eventMap[name] = callbacks
return () => callbacks.shift(callback)
}
}
export default MyEvent

这个库一共只要两个接口：

• pub(name:String,data:data):void：宣布一个事宜，这个事宜附带一些数据，当这个事宜宣布的时刻，一切定阅这个事宜的都将会收到关照，并实行定阅这个事宜的时刻定义的操纵，即回调函数。
• sub(name:String,callback:Function):Fuction：定阅一个事宜，当这个事宜发作的时刻，即挪用pub的时刻，该callback就会实行，并且在callback中可以收到这个事宜发作的时刻的附带数据。该函数还返回一个新的函数，挪用这个函数可以作废定阅该事宜

案例：

import MyEvent from '../../0x012-component-communication/src/MyEvent'
// 定义一个变量
let num = 1
// 定义一个事宜名
const EVENT_INCREMENT = 'EVENT_INCREMENT'
// 定阅这个事宜，并将作废定阅的函数保留起来
let unSub = MyEvent.sub(EVENT_INCREMENT, (data) => {
console.log(data)
})
// 当 num 发作变化的时刻，宣布这个时候
num += 1
MyEvent.pub(EVENT_INCREMENT, {num: num})
// 当 num 发作变化的时刻，宣布这个时候
num += 1
MyEvent.pub(EVENT_INCREMENT, {num: num})
// 作废定阅
unSub()
// 当 num 发作变化的时刻，宣布这个时候
num += 1
MyEvent.pub(EVENT_INCREMENT, {num: num})
// 当 num 发作变化的时刻，宣布这个时候
num += 1
MyEvent.pub(EVENT_INCREMENT, {num: num})
console.log({num})


检察浏览器，可以看到，我们收到了两次关照，由于我们在半途作废了定阅

道理就是保留了MyEvent中的eventMap保留了一个Map，该Map是一个String=>Array，当我们定阅事宜的时刻，即挪用sub的时刻，就会构成以下的数据结构：

name | callbacks
EVENT_INCRECEMENT | (data)=>{...}
- | (data)=>{...}
- | (data)=>{...}
EVENT_DECRECEMENT | (data)=>{...}
- | (data)=>{...}

当我们挪用pub的时刻，就或寻找到这个事宜名，并轮回将该事宜名下挂载的callback行列实行。
当我们挪用unsub的时刻，则会将这个callback从行列中移除，如许就不会实行了。

redux的道理和这个大略的框架相似，就是比这精致多了，不过实质照样一样的，我们可以定阅某个值的变化，然后在某个值变化并收到这个关照的时刻作出我们本身的逻辑。

接下来我们会运用redux，然后经由历程redux来革新这个我们的ledux，打造成最少表面上相似的&＃8230;&＃8230;

0x005 redux栗子

import {createStore} from 'redux'
// 定义一个 reducer
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// 定义一个store，持有全局的 state
let store = createStore(counter)
// 定阅，并输出 state
store.subscribe(() =>
console.log(store.getState())
)
// 宣布一个事宜
store.dispatch({type: 'INCREMENT'})
store.dispatch({type: 'INCREMENT'})
store.dispatch({type: 'DECREMENT'})

检察浏览器

可以看到，实在形式差不多：

• 定义数据：

  • redux:reducer 部份
  • MyEvent:let num部份

• 定阅：

  • redux:subscribe 部份
  • MyEvent:sub部份

• 宣布：

  • redux:dispatch 部份
  • MyEvent:pub部份

然则实在内部差别又非常大，在MyEvent中，都是很随意的，我可以随意定义事宜，随意修正数据，随意宣布事宜，所以我写的东西叫做事宜关照，而不是状况治理。redux是用来做状况治理的，可以说是在事宜关照当中再一次做了封装。

• 在MyEvent中数据是可以随意修正的，然则在redux中，数据的修正只能经由历程dispatch提交一个修正要求，而在reducer中处置惩罚这个要求。

0x006 ledux完成：

• 编写redux

class Ledux {
static createStore(reduer) {
return new Store(reduer)
}
}
class Store {
constructor(reducer) {
this.state = reducer(null, {})
this.callbacks = []
this.reducer = reducer
}
subscribe(callback) {
this.callbacks.push(callback)
}
getState() {
return this.state
}
dispatch(action) {
this.state = this.reducer(this.state, action)
this.callbacks.forEach(callback => callback())
}
}
export default Ledux

• 运用Ledix


import Ledux from "./ledux";
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
let store=Ledux.createStore(counter)
store.subscribe(()=>{
console.log(store.getState())
})
store.dispatch({type: 'INCREMENT'})
store.dispatch({type: 'INCREMENT'})
store.dispatch({type: 'DECREMENT'})

• 检察浏览器

可以看到，结果是一样的，而历程除了我喜好用class封装之外也没有太大的区分，就如许完成了ledux了，固然跟着对redux的api的深切进修，这个框架也可以不停的深切发展。

0x007 资本

• 源码