react Hook sにおける状態管理が新たな構想を実現する.

TeleState特性
1、ヤフオクアプリの状態共有.
2、コンポーネントの外で、dispatchでstateを変更することができます.
3、プロviderは必要なく、コンポーネントがプロviderの作用領域にあるかどうかを考慮しなくてもいいです.
4、体積は4 kだけです
5、typescript friendly.
欠点
classコンポーネントはしばらくサポートされていませんが、自分で関数式コンポーネントを使って高次的にサポートする必要があります.
部分的な状態を共有できませんでした.menuコンポーネントmenu-intemがmenuを共有している状態のように、複数のmenuのインスタンスの状態が異なるため、context+providerスキームのみが使用される.
原理を実現する
set State queueで状態を配信します.
インストール

npm i tele-state

第一ステップは、状態連動のhooks「useTeleState」を作成します.
src/moduleA/store.ts

import React, { useEffect } from 'react'

import { createTeleState } from 'tele-state'

const { useTeleState } = createTeleState(1)

export {
    useTeleState
}

Step 2-コンポーネントでこのhooksを使用して、apiはuseStateと似ています.
src/moduleA/component Test.tsx

import {useTeleState} from './store'

  function ComponentA(){
    const [ count ] = useTeleState()
    console.log('B----------', count)
    return <>{count}>
  }

  function ComponentB(){
    const [ count, setCount ] = useTeleState()
    console.log('A----------', count)
    useEffect( () =>{
      setCount(count+1) // ComponentA will update too.
    }, [] )
    return  setCount(count+1)}>add {count}
  }

コンポーネント外読み/状態変更
src/store.ts

  const { 
      useTeleState， 
      dispatch， //         ，      ，      .
      getState,  //           
  } = createTeleState(1)



  export const addCount = () => {
      //         ，      ，      .
      dispatch( preCount => preCount+1 )
      //           .
      const count = getState()
      fetch(`/api/bean?count=${count}`)
  }
  
  export {
      useTeleState
  }

実際のプロジェクトでは、複数のteleStateを作成し、各teleStateは、それぞれの業務/機能モジュールの下で状態を宣言します.後はプロジェクトを分割する時も、簡単です.
現在主流方案との対比
hooks+context
基本原理はstateとdispatchをcontextのProviderに保存し、use Contect appiを利用してproviderの中のstateとdispatchを取得することです.その上のパッケージはease-peasyなどがあります.

    //   context
    const countContex = createContext({count: 1, setCount: (count: number) => {}})
    
    //  dispatch   state  provider
    const StoreProvider = ({children}: {children:ReactElement}) => {
      const [count, setCount] = useState(1)
      return 

          {children}
      
    }
    
    //   useContext
    const ComponentA = () => {
      const { count, setCount} = useContext(countContex)
      // ....
    }

この案はteleStateの欠点に対して:1、コンポーネントの外で状態を取得/更新するのはあまり便利ではない.2、使用状態においては、Providerの作用域問題を考慮する必要がある.
mobx
当初はmobxのapiデザインが対象に向けられていましたが、多くのデコレーションモードが使われています.今、Hook sは関数のコンポーネントを抱擁させます.いささかばつが悪いように見える.ここでも過大評価はしません.
redux
利点:reduxはデータフローを規範化している.短所:状態管理を集中的に管理して、怠惰な負荷に不利です.