react_hooks系列09_useSyncExternalStore

React18的beta版本将useMutableSource更新为了useSyncExternalStore，这个新的api将会对React的各种状态管理库产生非常大的影响，

我们可以通过这个api自行设计一个redux + react-redux的数据方案：

1、设计store

首先我们要设计一个store，它必须有如下属性：

• currentState:当前状态

• subscribe:提供状态发生变化时的订阅能力

• getSnapshot: 获取当前状态

以及改变state的方法，这里参考redux，设计了dispatch、reducer

const store = {
    currentState:{data:0},
    listeners:[],//保存的是所有订阅（函数）
    
    reducer(action){
        switch(action.type) {
            case 'ADD':
                return {data:store.currentState.data+1}
            default:
                return store.state
        }
    },
    //订阅
    subscribe(cb){
        store.listeners.push(cb)
    },
    //获取当前值
    getSnapshot() {
        return store.currentState
    },
    
    dispatch(action) {
        //修改状态
        store.currentState = store.reducer(action)
        //发布
        store.listeners.forEach(cb=>cb())
        return action;
    }
}

2、应用 store 同步组件状态

import React, { useSyncExternalStore } from 'react'
import store from './store'

export default function UseSyncExternalStoreDemo() {
  const state = useSyncExternalStore(store.subscribe, () => store.getSnapshot().data);
    
    return (
      <div>
        <div>count: {state}</div>
        <div>
            <button onClick={()=>store.dispatch({type:'ADD'})}>add+</button>
        </div>
      </div>
    )
}