把redux当做观察者单独使用
原创
提到redux大家肯定会想到react，但是redux这个库可以单独使用，下面我们就来看看如何把redux当做一个观察者来使用。
我们知道在观察者模式中，观察者对象一般会有两个方法，一个用来监听事件，一个用来发布消息，另外其内部一般有一个不可以见的属性来存储事件，这个属性通常为一个数组。redux会将生成一个store对象，这个对象可以理解为是一个观察者，只不过其内部保存了像树一样的数据结构，而更改数据结构，和更改产生的后果就借鉴了观察者模式。
首先来看下代码：
// 1、引入redux,导出creatStore
import { createStore } from 'redux';
// 2、设置初始值
const obj = { name: 'zs', age: 14 }
// 3、编写reduxer,传入初始值
const objReducer = (state = obj, action) => {
switch (action.type) {
case 'addage':
state.age = action.payload.age;
return {...state};
default:
return state
}
}
// 3、调用createStore生成store
const store = createStore(objReducer)
console.log(store);
// 4、调用store的subscribe方法监听事件
store.subscribe((e)=>{
console.log("disptach")
console.log(e)
})
// 5、使用store的dispatch方法触发事件,并传入action
store.dispatch({type:'addage',payload:{age:200}})
// 6、调用store.getState方法获取store树的值
console.log(store.getState());执行上面代码我们发现，dispatch就相当于观察者的发布消息，subxcrible就相当于订阅监听事件的方法。
简单的使用redux的话，有如下几个步骤：
1、导入redux，并导出createstore方法
2、创建reducer
3、调用createstore传入reducer穿件store
4、用store的subscribe方法监听事件，用dispatch方法更改store触发事件
需要注意的是，我们在调用disptach的时候需要传递一个名为action的对象，对象有两个属性type，store通过type判断修改store树的那个数据，payload为修改时传递的参数。
上面的代码是有点需要优化的，我们在开发时，store往往比较复杂，我们需要将不同的状态保存到不同的reducer中，而不是统一放在一起。这就需要一个方法，combineReducers，看代码：
// 1、引入redux,导出creatStore
import { createStore,combineReducers } from 'redux';
// 2、编写第一个reducer
const objReducer = (state = { name: 'zs', age: 14 }, action) => {
switch (action.type) {
case 'addage':
state.age = action.payload.age;
return {...state};
default:
return state
}
}
// 3、编写第二个reducer
const arrReducer = (state = [],action)=>{
switch (action.type) {
case 'add':
state.push(action.payload)
return [...state]
default:
return state
}
}
// 4、将所有reducer用combineReducers合并成一个reducers
const reducers = combineReducers({
objReducer,
arrReducer
})
// 5、调用createStore生成store
const store = createStore(reducers)
console.log(store);
// 6、调用store的subscribe方法监听事件
store.subscribe(()=>{
console.log("disptach")
})
// 7、使用store的dispatch方法触发事件,并传入action
store.dispatch({type:'addage',payload:{age:200}})
store.dispatch({type:'add',payload:'22222'})
// 8、调用store.getState方法获取store树的值
console.log(store.getState());使用步骤如下：
1、引入redux，并导出createStore和combineReducers
2、编写reducers，也就是编写多个reducer，每一个reducer保存某一个数据状态
3、用combineReducer是合并reducer
4、调用createStore生成store
注意：此时如果调用getStore得到的是一个对象，这个的每个属性分别指向单独定义热reducer，如图：
了解了store的结构和配置过程，接下来了解如何使用。
通常我们用dispatch来更改store，dispatch相当于观察者模式的发布消息，那谁是监听方法呢，subscrible就是观察者模式的监听者，subscrible负责将要执行的动作收集起来，在store调用dispatch时统一执行。是不是和观察者模式很像。
在开发中通常我们使用dispatch时一般是传递一个对象，但是有时为了方便，我们通常将action作为函数的返回值，代码如下：
// 生成action的函数
function createAction(type, payload){
return {
type,
payload
}
}
// dispatch的参数是一个函数调用
store.dispatch(createAction('addage',{age:9999}))可以看到我们先声明了一个createAction函数，其内部返回了一个标准的action。
还有一种情况是，我们需要异步执行dispatch，这里一般有两种执行方式，第一种是如果我们的数据是异步获取的，那么我们可以在获取数据后在调用dispatch，另外一种是借助插件，我们可以向dispatch传递一个函数，注意事函数，而不是函数执行，dispatch会自动先调用函数，这个函数的格式是固定的，其参为dispatch，其内部既获取了数据后又可以同步执行dispatch。我们来看下代码：
这里没有黏贴代码，直接截图来的，可以观察上图第三个红框，我们发现，在dispatch内部传递了一个函数，函数的参数为dispatch和getState，在函数内部我们用setTimeout模仿了异步。
综上所述，想要向dispatch传递函数，使其支持异步调用需要如下两个步骤：
1、引入redux-thunk
2、在调用createStore时传入插件，插件需要用applyMiddleware包装一下；
这里还有一点需要注意如何我们配置开发环境，需要获取浏览器的支持，那么我们还需要如下配置
3、用window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__或者compose包裹一下插件,代码如下：
行文至此也该结束了，总结一下:
1、首先讲了redux和观察者模式的关系
2、如何使用配置redux
3、store的数据结构，合并多个reducer
4、action的变形，可以是一个函数调用，函数内部返回action
5、结合redux-thunk，dispatch内部可以传递函数，函数内部可以执行异步操作。
以上便是单独的redux的使用了，嗯，比较麻烦，每次使用都需要这么配置。希望对你有所帮助，下篇文章聊聊redux怎么和react相结合。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。