react js自定义实现状态管理

redux基础实现

myRedux

export const createStore = (reduce) => {
  if (typeof reduce !== 'function') throw new Error('Expected the reducer to be a function.')
  let state,
    listeners = []
  state = reduce()


  const getState = () => state
  const dispatch = (action) => {
    if(typeof action !== 'object' || typeof action.type !== 'string') throw new Error('Actions must be plain objects.')
    state = reduce(state, action)
    listeners.forEach(listener => listener())
  }
  const subscribe = (listener) => {
    if(typeof listener !== 'function') throw new Error('Expected the listener to be a function.')
    listeners.push(listener)
    return () => listeners = listeners.filter(l => l !== listener)
  }

  return {
    getState,
    dispatch,
    subscribe,
  }
}

使用

import React, { useEffect, useState } from 'react'
import { createStore } from './myRedux'


const reduce = (state = { a: 123 }, action = {}) => {
  state = { ...state }
  switch (action.type) {
    case 'tset':
      state.a = Math.random() * 1000
      return state
    default:
      return state
  }

}
const store = createStore(reduce)



export default function Test() {
  const state = store.getState()
  const [_, foceUpdate] = useState(0)
  useEffect(() => {
    store.subscribe(() => {
      foceUpdate(Date.now())
    })
  }, [])
  const change = () => {
    store.dispatch({ type: 'tset' })
  }
  return (
    <div>
      <h1>Test {state.a}</h1>
      <button onClick={change} >change</button>
    </div>
  )
}

react-redux

和源码可能不同，我没看过源码，只是实现一下

react-redux.js

import { useContext, useEffect, useState, createContext } from 'react'
const StoreContext = createContext()
export const Provider = (props) => {
  const store = props.store
  return <StoreContext.Provider value={{ store }}>{props.children}</StoreContext.Provider>
}

export const connect = (mapState, mapDispatch) => {
  if (typeof mapState !== 'function') throw new Error('mapState must be an function')
  if (typeof mapDispatch !== 'function') throw new Error('mapDispatch must be an function')
  return (Cpn) => {
    return (props = {}) => {
      const contents = useContext(StoreContext)
      const store = contents.store
      const state = mapState(store.getState())
      const dispatch = mapDispatch(store.dispatch)
      const [_, forceUpdate] = useState(true)
      useEffect(() => {
        store.subscribe(() => {
          forceUpdate(Symbol())
        })
      }, [])
      props = { ...props, ...state, ...dispatch }
      return <Cpn {...props} />
    }
  }
}

使用

import React from 'react'
import { Provider, connect } from './react-redux'
import { createStore } from 'redux'
const reducer = (state = { name: 'test' }, action) => {
  switch (action.type) {
    case 'CHANGE_NAME':
      return { ...state, name: action.name }
    default:
      return state
  }
}
const store = createStore(reducer)

function Test2(props) {
  const change = () => {
    props.changeName('test' + Math.random())
  }
  return (
    <div>
      <h1>Test {props.name} </h1>
      <button onClick={change} >change</button>
    </div>
  )
}
const Test3 = connect(
  state => ({ name: state.name }),
  dispatch => ({ changeName: (name) => dispatch({ type: "CHANGE_NAME", name }) })
)(Test2)

export default function Test() {
  return (
    <Provider store={store} >
      <Test3 />
    </Provider>
  )
}

模仿pinia方式管理

myPinia.js

import { useEffect, useState } from 'react'

class StoreState {
  constructor(value) {
    this.value = value
    this.symbol = Symbol()
  }
}


export const createStore = (f) => {
  if (typeof f !== 'function') throw new Error('Expected a function')
  const store = f()
  watch(store)
  const useStore = () => {
    return new Proxy(store, {
      get: (target, prop) => {
        const v = target[prop]
        const isState = v instanceof StoreState
        return isState ? v.value : v
      },
      set: () => store,
    })
  }
  return useStore
}

export const useStoreState = (v) => {
  return new StoreState(v)
}

const watch = (obj) => {
  Object.keys(obj).forEach((key) => {
    const storeState = obj[key]
    if (storeState instanceof StoreState) {
      let value = storeState.value
      Object.defineProperty(storeState, 'value', {
        get: () => value,
        set: (newValue) => {
          value = newValue
          updateView()
        },
      })
    }
  })
}

let listeners = []
export const subscribe = (f) => {
  if (typeof f !== 'function') throw new Error('Expected a function')
  if (!listeners.includes(f)) listeners.push(f)
  return () => (listeners = listeners.filter((l) => l !== f))
}
const updateView = () => listeners.forEach((f) => f())

export const connect = (Cpn) => {
  return (props) => {
    const [_, forceUpdate] = useState(true)
    useEffect(() => {
      const unSubscribe = subscribe(() => forceUpdate(Symbol()))
      return unSubscribe
    }, [])
    return <Cpn {...props} />
  }
}

使用

import React from 'react'
import { createStore, useStoreState, connect } from './myPinia'


const useUserStore = createStore(() => {
  let name = useStoreState('test')
  const change = () => {
    name.value = 'test2' + Math.random()
  }
  return { name, change }
})

function Test() {
  const store = useUserStore()
  const change = () => {
    store.change()
  }
  return (
    <div>
      <h2>Test {store.name}</h2>
      <button onClick={change}>change</button>
    </div>
  )
}

export default connect(Test)

不足的是，还是需要forceUpdate

react-pinia

实现模块化

react-pinia.js

import { useEffect, useState } from 'react'

const storeMap = new Map()
export function createStore(id, f) {
  if (typeof f !== 'function') throw new Error('Expected f to be a function.')
  const store = f()
  store._storeId = id
  const proxy = new Proxy(store, {
    get: (target, p) => (target[p] instanceof StoreState ? target[p].value : target[p]),
    set: () => store,
  })
  storeMap.set(id, store)
  return () => proxy
}

class StoreState {
  constructor({ value }) {
    this.value = value
    this.symbol = Symbol()
  }
}

export const useStoreState = (value) => {
  const state = new StoreState({ value })
  return new Proxy(state, {
    get: (target, p) => target[p],
    set: (target, p, value) => {
      target[p] = value
      target instanceof StoreState && updateView(target.symbol)
      return state
    },
  })
}

const listenerMap = new Map()
const updateView = (symbol) => {
  const listeners = listenerMap.get(symbol) || []
  listeners.forEach((listener) => {
    listener()
  })
}
const subscribe = (symbol, listener) => {
  if (!listenerMap.has(symbol)) listenerMap.set(symbol, new Set())
  listenerMap.get(symbol).add(listener)
  return () => {
    listenerMap.get(symbol).delete(listener)
  }
}

const createCollectDepend = () => {
  const symbolArr = []
  const f = (storeProxy) => {
    const id = storeProxy._storeId
    const store = storeMap.get(id)
    return new Proxy(store, {
      get: (target, p) => {
        if (target[p] instanceof StoreState) {
          symbolArr.push(target[p].symbol)
          return target[p].value
        }
        return target[p]
      },
      set: () => store,
    })
  }
  return [symbolArr, f]
}
export const collectDepend = (f) => {
  if (typeof f !== 'function') throw new Error('Expected f to be a function.')
  const [symbolArr, collectFunc] = createCollectDepend()

  return (Cpn) => {
    return (props) => {
      const mapStore = f(collectFunc) || {}
      const mapStoreIsObj = Object.prototype.toString.call(mapStore) === '[object Object]'
      const nextState = mapStoreIsObj ? mapStore : {}
      const [, forceUpdate] = useState(Symbol())
      useEffect(() => {
        const unSubscribeArr = symbolArr.map((id) => subscribe(id, () => forceUpdate(Symbol())))
        return () => unSubscribeArr.forEach((unSubscribe) => unSubscribe())
      }, [])
      return <Cpn {...props} {...nextState} />
    }
  }
}

使用

import React, { useState, memo } from 'react'
import { createStore, useStoreState, collectDepend } from './react-pinia'

export default function Demo() {
  console.log('render Demo');
  const [n, setN] = useState(0)
  const test = () => {
    setN(Math.random())
  }
  return (
    <div>
      <h2>{n}</h2>
      <button onClick={test} >test</button>

      <Test />
    </div>
  )
}

const store = createStore('user', () => {
  const name = useStoreState('张三')
  const change = () => {
    name.value = '李四' + Math.random()
  }
  return { name, change }
})()

function Test2(props) {
  console.log('render Test2');
  return (
    <div>
      <h2>Test {props.name}</h2>
      <button onClick={props.change}>change</button>
      <br />

    </div>
  )
}
const Test = memo(collectDepend((collectFunc) => {
  const userStore = collectFunc(store)
  return { name: userStore.name, change: userStore.change }
})(Test2))