redux的实现过程

Posted happyYawen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了redux的实现过程相关的知识,希望对你有一定的参考价值。

Redux实现原理

不同组件需要依赖同一个数据的时候,就需要状态提升至这些组件的根组件。
redux是状态统一管理工具,需要使用它的原因是: 组件之间通信统一管理,方便代码维护。

React中有一个特性context,只要某个组件使用context存储了数据,那么这个组件的所有子组件都可以访问该context内容,并且还可以修改它。就像是这个组件的全局变量,它的所有子组件都可以访问这个全局变量。
如下图,假设要更改主题颜色,那么在Index根组件的context中存储当前主题色,那么它的子组件header,footer,title,menu都可以访问到,并且可以修改。

Redux的统一数据管理,与React的关联之处利用的就是context特性
但是context有一个缺点就是,所有的子组件都可以修改共享的内容,每个组件都能够改 context 里面的内容会导致程序的运行不可预料。所以React团队的做法就是,提高修改的门槛,修改数据时统一调用dispatch函数,并且需要传入修改类型,如果dispatch中不存在该类型,则不允许修改。
接下来简单推理一下redux的实现过程(假设有组件Index,Header,Footer)。
1、第一步是需要有一个存储数据的对象,定义为appState

   	var appState = {
	   	themeColor:\'red\',
	   	themeBackground:\'black\'
	};
	//还需要一个修改数据的函数
	function dispatch(action){
		switch(action.type){
			case \'UPDATE_THEME_COLOR\':
				appState.themeColor = action.color;break;
			case \'UPDATE_THEME_BACKGROUND\':
				appState.themeBackground = action.color;break;
			default break;		
		}
	}
	//修改完数据,就需要重新渲染了,定义渲染函数
	function renderApp(state){
		renderHeader(state);
		renderFooter(state);
	}
	function renderHeader(state){
		header = document.getElementById(\'header\');
		header.style.color = state.color;
		header.style.backgroundColor = state.themeBackground;
	}
	function renderFooter(state){
		title = document.getElementById(\'footer\');
		footer.style.color = state.color;
		footer.style.backgroundColor = state.themeBackground;
	}
	
	dispatch({type:\'UPDATE_THEME_COLOR\',color:\'green\'})//修改主题色
	renderApp(appState)//执行重新渲染

2、封装state和dispatch,命名为store,方便复用,同时添加监听,当数据变化时,通知订阅者重新渲染

	function createStore(state,stateChanger){
		const getState = () => state;//获取数据
		const listeners = [];
		const subscribe = (listener) => listeners.push(listener);
		const dispatch = (action) => {
			stateChanger(state, action);
			listeners.forEach((listener)=>listener());
		};
		return {getState,dispatch,subscribe};
	}
	//实例化一个store。为了统一命名,dispatch改为stateChanger,appState改名为state
	const store = createStore(state,stateChanger);
	renderApp(store.getState());//首次渲染
	store.subscribe(renderApp(store.getState()));//添加订阅者,监听到变化就重新渲染数据
	store.dispatch({type:\'UPDATE_THEME_COLOR\',color:\'green\'});//修改主题

3、第二步有一个很大的缺陷就是,每次修改数据就重新全部渲染一遍,对性能影响很大。
优化点是: 判断数据是否有变化,如果没变化就不需要重新渲染,另外stateChanger与state合为一体。

	//此处用到es6的浅复制,例如
	let a = { name:\'HAPPY\',attr:{age:23},common:{sex:\'女\'}};
	let b = {...a,attr:{age:24}};//b为{name:\'HAPPY\',attr:{age:24},common:{sex:\'女\'}} 
	a.name===b.name//true
	a.attr===b.attr//false
	a.common===b.common//true
	//这样有50%以上的复用率
	function stateChanger(state,action){
		if(!state){
			 return {
				 themeColor:\'red\',
			   	 themeBackground:\'black\'
			 }
		}
		const newState = {...state};
		switch(action.type){
			case \'UPDATE_THEME_COLOR\':
				return {
					...newState,
					themeColor: action.color
				};
			case \'UPDATE_THEME_BACKGROUND\':
				return {
					...newState,
					themeBackground: action.color
				};
			default 
				return newState;	
		}
	}
	//那么渲染的时候需要知道oldState和newState,这样才能对比数据的变化
	function renderApp(state,oldState={}){//此处oldState放在后面,并且给默认值,是为了兼容首次渲染,首次渲染olsState是没有值的,所以给默认值
		if(oldState===state){
			return;
		}
		renderHeader(oldState,state);
		renderFooter(oldState,state);
	}
	//如果renderHeder需要的渲染的数据是state内的子对象,那么在renderHeader渲染之前,也需要判断一下数据是否有变化,此处举的例子state结构简单,所以不需要判断。
	
	function createStore(stateChanger){//此处是优化state与stateChanger结合。
		let state = null
		const getState = () => state;//获取数据
		const listeners = [];
		const subscribe = (listener) => listeners.push(listener);
		const dispatch = (action) => {
			state = stateChanger(state, action);
			listeners.forEach((listener)=>listener());
		};
                dispatch({});//初始化,获取state
		return {getState,dispatch,subscribe};
	}
	//最后需要oldState,那么我们就需要定义oldState
	const store = createStore(stateStranger);
	const oldState = store.getState();
	store.subscribe(()=>{
		const newState = store.getState();
		renderApp(oldState,newState);
		oldState = newState;
	});//添加监听
	renderApp(store.getState())//首次渲染
	store.dispatch({type:\'UPDATE_THEME_COLOR\',color:\'green\'});//修改主题

4.此时的stateChanger是一个纯函数,就是内部逻辑只与参数有关,并且无副作用(也就是对其他数据没有任何影响)。它要做的仅仅是 —— 初始化和计算新的 state。(并不会修改state,因为我们每次返回的都是新的对象)
而这个函数就是redux中的reducer,那么我们给stateChanger改名字为reducer.现在我们的redux就实现完成了。

	 function reducer(state,action){...}
	 function createStore(reducer){...}
	 //接下来我们就可以定义不同的reducer,生成不同的store了,并且修改监听,例如
	 function themeReducer(state,action){...}
	 const store = createStore(themeReducer);
	 // 监听数据变化重新渲染页面
	 store.subscribe(() => renderApp(store.getState()))
	 // 首次渲染页面
	 renderApp(store.getState())
	 // 后面可以随意 dispatch 了,页面自动更新
	 store.dispatch(...)
但是我们怎么跟react进行连接呢?怎么把redux用在react中呢?就需要react-redux来连接。下一篇继续

参考教程:(http://huziketang.mangojuice.top/books/react)

以上是关于redux的实现过程的主要内容,如果未能解决你的问题,请参考以下文章

React-Redux-实现原理

“ES7 React/Redux/GraphQL/React-Native 片段”不适用于 javascript 文件。除了安装它,我还需要配置其他东西吗?

我的一个配置redux(实现一个自增功能)之旅

Redux和React-Redux的实现:中间件的原理和applyMiddlewareThunk的实现

VsCode 代码片段-提升研发效率

Redux之中间件的原理和applyMiddlewareThunk的实现