Redux实现

简介

       官方意思：Redux 是 JavaScript 状态容器，提供可预测化的状态管理，
       现在很多时候都是将Redux和React放在一起，因为React提出将展示组件与容器组件分离的思想，所以降低了React 与Redux之间的耦合度。
       对于Redux架构的使用并不是非用不可，对于简单的代码使用Redux会增加代码的复杂性，对于多交互、多数据源场景使用Redux会使数据之间的交互更加清晰，有逻辑性。
       如果你的应用有以下场景，建议使用 Redux：

• 某个组件的状态，需要共享
• 某个状态需要在任何地方都可以拿到
• 一个组件需要改变全局状态
• 一个组件需要改变另一个组件的状态

基本原则

       整个应用只有唯一一个可信数据源，也就是只有一个 Store
       State 只能通过触发 Action 来更改
       State 的更改必须写成纯函数，也就是每次更改总是返回一个新的 State，在 Redux 里这种函数称为 Reducer
       Redux模块
       1). redux模块整体是一个对象模块
       2). 内部包含几个函数
       createStore()
       combineReducers()
       applyMiddleware()
       3). store对象的功能
       getState()
       dispatch(action)
       subscibe(listener)
/*

	创建store对象的函数
	 */
	export function createStore(reducer) {
	  // 内部管理的state
	  let state
	  // 用来缓存监听的数组容器
	  const listeners = []
	  // 初始调用reducer得到初始state值
	  state = reducer(state, {type: '@@mini-redux/INIT'})
	
	  /*
	  获取当前状态
	   */
	  function getState() {
	    return state
	  }
	
	  /*
	  分发消息
	   */
	  function dispatch(action) {
	    // 调用reducer, 得到新的state
	    state = 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
	    }, {})
	  }
	}