深入浅出—Redux源码


阅读本文的前提条件,了解 Redux基本概念
杂谈:
  了解一个框架,首先得明白, 框架解决的痛点是什么
  前端需要对状态进行管理(同步状态、 异步状态),讲实话,随便写写代码都是状态管理,但是这是我们的追求么?当然不是,我们需要优雅地对前端状态进行管理。在MVC架构中,可以简单映射为数据(Model)----界面(View)----交互操作(Controller)。
  所谓的状态管理基本就是对数据和交互操作的管理。Redux基本就做了这样一件事情。
总结:
Redux源码基本做了两个操作:
1)维护一个状态树
2)状态的发布订阅

一、维护一个状态树、发布订阅

/** 创建状态树
*  @param {Function} reducer:reducer就是你写的函数,actionType---->new state
*  @param {any} preloadedState: store的初始状态,可以是任何形式,可以是函数,因为有的初始状态可能需要从服务端获取数据进行merge
*  @param {Function} enhancer: 中间件,在action发出之前经历的一系列骚操作
*  @returns {Store} :返回值是一个对象,可以对Store进行一系列操作,订阅、获取等
*/
export default function createStore(reducer, preloadedState, enhancer) {
	 // 在源码中,将preloadedState和enhancer可以看作是同一个作用的,就是在生成初始状态之前进行的一系列操作
	 if (
		    (typeof preloadedState === 'function' && typeof enhancer === 'function') ||
		    (typeof enhancer === 'function' && typeof arguments[3] === 'function')
  	) {
		    throw new Error(
		      'It looks like you are passing several store enhancers to ' +
		        'createStore(). This is not supported. Instead, compose them ' +
		        'together to a single function'
		    )
  	}
	if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    		enhancer = preloadedState
    		preloadedState = undefined
  	}
  	/**
  	* 如果定义了中间件,要到中间件中去执行相应的操作,传入的这几个参数有什么用?待会在中间件中解释
  	*  @params {createStore}  
  	*  @params {reducer, preloadedState}
  	*/
 	 if (typeof enhancer !== 'undefined') {
   		 if (typeof enhancer !== 'function') {
      		throw new Error('Expected the enhancer to be a function.')
    	}
    	return enhancer(createStore)(reducer, preloadedState)
	 }
	 /**
	 * 如果没有中间件,那么我们就继续执行,创建Store
	 *  @variable 
	 * 		-currentReducer:当前的reducer,也就是你传入的reducer
	 * 		-currentState:当前的状态,你传入的state的初始值,如果没有传入,undefiend
	 * 		-currentListe
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值