[Redux/Mobx] 说说Redux的实现流程

通过分析redux的几个核心api，来看如何实现redux

store.subscribe: 订阅数据的变化
store.dispatch：dispatch后改变state,同时通知store.subscribe函数执行，上面这两个函数可以利用发布-订阅模式
store.getState: 通过这个函数直接返回内存中的state变量即可
简单的实现如下

export function createStore(reducer, enhancer) {if (enhancer && typeof enhancer === 'function') {const newCreateStore = enhancer(createStore);const newStore = newCreateStore(reducer);return newStore;}let state;              // state记录所有状态let listeners = [];     // 保存所有注册的回调function subscribe(callback) {listeners.push(callback);       // subscribe就是将回调保存下来}// dispatch就是将所有的回调拿出来依次执行就行function dispatch(action) {state = reducer(state, action);for (let i = 0; i < listeners.length; i++) {const listener = listeners[i];listener();}}// getState直接返回statefunction getState() {return state;}// store包装一下前面的方法直接返回const store = {subscribe,dispatch,getState}return store;
}export function combineReducers(reducerMap) {const reducerKeys = Object.keys(reducerMap);    // 先把参数里面所有的键值拿出来// 返回值是一个普通结构的reducer函数const reducer = (state = {}, action) => {const newState = {};for (let i = 0; i < reducerKeys.length; i++) {// reducerMap里面每个键的值都是一个reducer，我们把它拿出来运行下就可以得到对应键新的state值// 然后将所有reducer返回的state按照参数里面的key组装好// 最后再返回组装好的newState就行const key = reducerKeys[i];const currentReducer = reducerMap[key];const prevState = state[key];newState[key] = currentReducer(prevState, action);}return newState;};return reducer;
}// 参数支持多个中间件
export function applyMiddleware(...middlewares) {function enhancer(createStore) {function newCreateStore(reducer) {const store = createStore(reducer);// 多个middleware，先解构出dispatch => newDispatch的结构const chain = middlewares.map(middleware => middleware(store));const { dispatch } = store;// 用compose得到一个组合了所有newDispatch的函数const newDispatchGen = Redux.compose(...chain);// 执行这个函数得到newDispatchconst newDispatch = newDispatchGen(dispatch);return {...store, dispatch: newDispatch}}return newCreateStore;}return enhancer;}

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[Redux/Mobx] 说说Redux的实现流程相关推荐

[Redux/Mobx] 在redux中，什么是action？
[Redux/Mobx] 在redux中,什么是action? action是Redux中定义一个响应的动作,action总是有一个type属性,作为这个动作的唯一标识; Reducer函数则会根据这 ...
[Redux/Mobx] 为什么redux能做到局部渲染呢？
[Redux/Mobx] 为什么redux能做到局部渲染呢? reducer从根往最子级的reducer中间各层总是返回一个新的state,这样的话,就会引起组件的大范围的re-render,但是这是 ...
[Redux/Mobx] 在Redux中怎么发起网络请求？
[Redux/Mobx] 在Redux中怎么发起网络请求? 如果单纯的使用Redux,因为redux的actionCreator返回一个plain object,所以不能在actionCreator中 ...
[Redux/Mobx] 说说redux的优缺点分别是什么？
[Redux/Mobx] 说说redux的优缺点分别是什么? 优点 Redux轻量,生态丰富,可以结合流行的redux-thunk.redux-saga等进行使用 Redux的写法比较固定,团队应用中 ...
[Redux/Mobx] 在redux中，什么是store？
[Redux/Mobx] 在redux中,什么是store? 单一数据源,整个应用数据保存的地方个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目 ...
Redux/Mobx面试题汇总
[Redux/Mobx] redux和flux的区别是什么? [Redux/Mobx] 什么是redux?说说你对redux的理解?有哪些运用场景? [Redux/Mobx] 在React中你是怎么对 ...
浅析前端状态管理Redux Mobx Vuex
写在前面前端技术的发展日新月异,vue,react,angular等的兴起,为我们带来了新的开发体验.但随着技术的革新,以及前端页面复杂度的提升,对应有localStorage,eventBus,v ...
Mobx 与 Redux 的性能对比
在本文中你将看到我最终得出的结论是 Mobx 的性能优于 Redux.但很明显这样的结论是片面的,甚至是有失偏颇的,因为我只选取了一个的场景对两者进行测试.可能真实的情况恰恰相反,Mobx 仅仅在我测 ...
[Redux/Mobx] Redux怎么添加新的中间件？
[Redux/Mobx] Redux怎么添加新的中间件? applyMiddleware 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌 ...

[Redux/Mobx] 说说Redux的实现流程

[Redux/Mobx] 说说Redux的实现流程

个人简介

主目录

[Redux/Mobx] 说说Redux的实现流程相关推荐

最新文章

热门文章