redux 原理

const defaultStatus = {
  name: '',
}

export default function xxx (state = defaultStatus, action) {
  switch (action.type) {
    case 'XXX':
      return { ...state, name: action.payload }
    
    default:
      return state
  }
}

export function createStore (reducer, enhancer) {
  if (enhancer) {
    return enhancer(createStore)(reducer)
  }

  let currentState = undefined  // 定义了 全局的state
  let currentListeners = []  // 订阅使用的
  // store.getState() 拿都这个状态树
  function getState () {  // 返回全局的store
    return currentState
  }
  // dispatch({ type, payload })
  function dispatch (action) { //修改 修改 reducer
    // xxx(currentState, action)
    currentState = reducer(currentState, action)
    currentListeners.map(lis => lis()) //订阅便利
    return action
  }

  function subscribe(listener) { //订阅使用
    currentListeners.push(listener)
  }

  dispatch({ type: "IMMOCC/KKKREDUX" })
  
  return {
    getState,
    dispatch,
    subscribe,
  }
}

const store = createStore(xxx)

console.log(store.getState(), 1)

store.dispatch({
  type: 'XXX',
  payload: '小花',
})

console.log(store.getState(), 2)

store

import { createStore, compose, combineReducers, applyMiddleware } from 'redux'
/*
	createStore：     创建一个 store
	combineReducers： 合并reduces
	applyMiddleware ：合并中间件
*/
import promise from 'redux-promise'
//解决 redux 异步操作的

import thunk from 'redux-thunk'
/*
	 帮助我们让所有的组件的props存在了dispatch方法，注意这个组件一定要被connect处理后才生效
　　 改造store.dispatch，使得它可以接受函数为参数（正常情况下只能是对象，不是函数）　
*/

//持久化
import { persistReducer } from 'redux-persist'
// import storage from 'redux-persist/lib/storage' // localstorage
import sessionStorage from 'redux-persist/lib/storage/session' // session
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'

//一下两个是引入的reducer中的文件 用来往redux里存数据的
import home from '@/reducer/home'


//白名单
const rootPersistConfig = {
    //存储的名字
    key: 'root',
    //存储的方式
    storage: sessionStorage,

    stateReconciler: autoMergeLevel2,
    //存储的数据
    whitelist: ['home'], // 白名单
}

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const store = createStore(
    persistReducer(rootPersistConfig, combineReducers({ home })),
    composeEnhancers(applyMiddleware(promise, thunk))
)

export default store