反応再送による状態管理

Relinkは反跳に触発された状態管理ライブラリです.
反跳は、フェイスブックのものですexperimental state management library . reduxからシフトして、私は半分以上の年のための反跳を使っていました、そして、これまで、それは私によく働きました.しかし、欠点は、ドキュメントが非常に完全ではない、それは私が自分自身を使用しないことを見つける機能が付属していることです.私が必要とするもののために、私は自分がかなり厄介な回避策に頼るのを見つけます.
私がまだ回避策を見つけていない1つのことは、反応するネイティブのナビゲーションで働くようにすることです.RNNでは、各画面は別々の反応成分ツリーを有する.すべての画面が自分でラップされているので、状態の更新は画面全体で発生しません.
確かに、そこに他のツールがそこには、国家管理を支援することができますが、それはまた私のための興味深い学習経験することができますので、私は自分の状態管理ソリューションを作成することを決めた.

再リンク
私はそれをrelinkrelink has been taken on NPM ). relinkがどのように働くかの一部はRecolに似ています.私はクレールの慣例を理解するのは簡単だとわかるので、私はそのようにしました.
ソースコードは現在利用可能ですGitHub パッケージはNPM . あなたが役に立つか、単に興味をそそられるならば、それをギタブの上でスターを与えることを検討してください😉.
以下は、いくつかの基本的な、詳細なドキュメントはreadme ファイル.

1必要なプロバイダーコンポーネント🤯

import { createSource, useRelinkState } from 'react-relink'

const ScoreSource = createSource({
  // key must be unique
  key: 'score',
  // This is the default state
  default: {
    red: 0,
    blue: 0,
  }
})

function App() {
  const [score, setScore] = useRelinkState(ScoreSource)
  return /* ... */
}

ソースを作成し、relinkフックでそれを使用し、それです.
フードの下で、再リンクフックは、コンポーネントの更新をトリガするリスナーを使用します.状態が異なる反応コンポーネント木の向こう側にアクセス可能になる(またはリンクされる).これはまた、“リリンク”と呼ばれる主な理由です.
もちろん、プロバイダが必要であり、プロバイダーの必要性を排除することが問題を引き起こすかどうかははっきりとは言えませんが、キーが一意である限り、それは大きな関心事ではありません.

水和と持続🌱
データの水和と持続性を管理するためのコードは、ソースの作成に近く維持されます.あなただけの真実の単一のソースを持っていないが、単一の場所あなたの水和/持続性のロジックを維持する.

const counterKey = 'counter'
const counterDefaultState = 1

createSource({
  key: counterKey,
  default: counterDefaultState,
  lifecycle: {
    // Hydration
    init: ({ commit }) => {
      const data = localStorage.getItem(counterKey)
      commit(data ? JSON.parse(data) : counterDefaultState)
    },
    // Persistence
    didSet: ({ state }) => {
      localStorage.setItem(counterKey, JSON.stringify(state))
    },
    // Persistence by cleaning up
    didReset: () => {
      localStorage.removeItem(counterKey)
    },
  }
})

追加オプション⚙️
水和の間のサスペンス成分
デフォルトでは水和は同期的に起こる.あなたがサーバーからデータをフェッチしているならば、水和が進行中である間、あなたはこれをオンにするか、条件付でUIをロードする必要があるでしょう.これはデフォルトで無効になっています.
無効にする
場合は、必死にいくつかのパフォーマンスの向上を必要とする場合は、変異を有効にすることができます.これは不必要な副作用につながる可能性があるため、デフォルトで無効になっています.
仮想バッチング
relinkのリスナーの更新をバッチ処理することでパフォーマンスを向上させることを意味しますunstable_batchedUpdates . これは初期段階で故障したコンポーネントの更新に結果として使用され、改善は明白ではないため、デフォルトで無効になっています.

createSource({
  key: string,
  default: any,
  options: {
    suspense: boolean,
    mutable: boolean,
    virtualBatch: boolean,
  }
})

(余剰)

おかしい観察
私が道に沿って学んだおかしいものが、あります.まずは、同じバンドルされたコードを使ってネイティブに反応して反応するようにしたかったのですが、明らかにバグにつながります🐛. 結局、私は反応DOMのために異なる束をつくって、ネイティブに反応しなければなりませんでした.
前述のように、relinkはリスナーを使用します.初めに頼りましたuseEffect リスナーを追加/クリーンアップするには、かなり混乱したエラーを作成しました.リスナを購読する3つのコンポーネントを想像してください.リスナーのコールバックは、forループ内のaからcまで呼び出されます.

┳━━━ <ComponentA />
┗━┳━ <ComponentB />
  ┗━━━ <ComponentC />

const keyStack = Object.keys(listeners)
for (const key of keyStack) { listeners[key]() }

コンポーネントBのコールバックが呼び出され、コンポーネントCがアンマウントされる可能性があります.その後、コンポーネントCのコールバックを呼び出すと、コールバックはクリーンアップ関数で削除されているので未定義になります.
使用for (... i < listeners.length ... ) or for (... i < Object.keys(listeners).length ... ) 少し助けますが、ループが完了する前にコールバックの配列を変更することはまだ可能です.
結局、私はuseLayoutEffect と反応unstable_batchedUpdates . これは、一緒に貸し手をバッチ化し、問題を解決するのに役立ちました.しかし、ブラウザーとモバイルプラットホームのためにコンポーネント更新をバッチ化するためのロジックは異なります.したがって、異なるコード束を生成する必要がある.
私はまた、リンクリストを使用しても、それをテストするために考えている.すでに動作しているので、今のままそのままコードを残しています.:3
最下部
ホイールを再発明しないでください、他のものによってすでに作られるものを使用してください.しかし、彼らがぎこちなく機能し始めるとき、あなたはあなた自身の車輪を製造することを考えたいかもしれません.
Facebookはすでにそこにいくつかの州の管理ソリューションを持っているにもかかわらず、彼らのニーズに合わせて調整を作成しました.relinkについても同様である.
もちろん、何も完璧です.国家管理があなたにとって重要であるならば、何も全く正しく働いていない、そして、あなたには能力があるならば、あなたはあまりにも合う解決をつくることを試みるべきであるかもしれません.🍻