浅谈redux仓库实现原理

redux 和 react的关系？

没有任何关系。

redux 是一个状态管理器。想理解redux的工作原理，不得不先提一下发布订阅。

发布订阅模式

发布者（唯一的） 订阅者（多个）。

主动方：发布者

被动方（等待方）：订阅者

发布者在发布一条信息的时候 会主动通知到订阅者。

js模拟实现一个简单的redux状态管理器

function createStore(reducer,initState={}){
    let state = initState;
    let  subscribeArr =[];
  
    // 注册成为我们状态管理器的订阅者
    function subscribe(subscribeItem){
        subscribeArr.push(subscribeItem)
    }

    // 修改状态
    function dispatch(actions){
      if(typeof actions !== 'object') return alert("actions类型不合法")
      state = reducer(state,actions)
      // 通知订阅者 
      for(let i =0;i<subscribeArr.length;i++){
        subscribeArr[i]()
      }
      return actions
    }

    // 获取仓库状态
    function getState(){
        return state
    }

    return {
        subscribe,
        getState,
        dispatch
    }
}

使用状态管理器

let initState = {
   name:'zhongxue',
   count:0
 }

let reducer = (state,actions)=>{
   if(actions.type==="CHANGE_NAME"){
     state.name = actions.name
   }
   if(actions.type=== "ADD"){
     ++state.count
   }
   if(actions.type=== "DIS"){
     --state.count
   }
   return {...state}
}

let store = createStore(reducer,initState)

顺便提一下redux-thunk中间件

改造dispatch函数 让该函数可以接受一个函数作为参数。

dispatch遇到函数则执行 遇到对象则去调用reducer修改仓库数据。

import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
let store = createStore(reducer,initState,applyMiddleware(thunk))