实现mini版redux

1. 理解redux模块

1). redux模块整体是一个对象模块
2). 内部包含几个函数createStore(reducers)  // reducers: function(state, action){ return newState}combineReducers(reducers)  // reducers: {reducer1, reducer2}  返回: function(state, action){ return newState}applyMiddleware()  // 暂不实现
3). store对象的功能getState()  // 返回当前statedispatch(action)  // 分发action: 调用reducers()得到新的总state, 执行所有已注册的监听函数subscibe(listener) // 订阅监听: 将监听函数保存起来

2. 实现代码: src/libs/redux/index.js

/*
创建store对象的函数*/
export function createStore(reducer) {// 内部管理的statelet state// 用来缓存监听的数组容器const listeners = []// 初始调用reducer得到初始state值state = reducer(state, {type: '@@mini-redux/INIT'})/*获取当前状态*/function getState() {return state}/*分发消息*/function dispatch(action) {// 调用reducer, 得到新的statestate = reducer(state, action)// 调用监听缓存中的所有Listener, 通知状态变化listeners.forEach(listener => listener())}/*订阅监听*/function subscribe(listener) {// 将新的监听添加到监听缓存容器中listeners.push(listener)}// 向外暴露store对象return {getState, dispatch, subscribe}
}/*
合并多个reducer的函数*/
export const combineReducers = (reducers) => {// 返回一个reduer声明函数return (state = {}, action) => {// 返回包含所有reducer状态的总state对象return Object.keys(reducers).reduce((preState, key) => {// 调用对应的reducer函数得到对应的新state, 并保存到总state中preState[key] = reducers[key](state[key], action)return preState}, {})}
}

------------恢复内容结束------------