あなたのストアを簡素化!図表入門

国家管理は、常に反応コミュニティで独断されました.それが最初にリリースされたとき、Reduxは反応生態系の革命的な技術でした.それは、アプリケーションが不変で、問題を解決した世界的な店を持つことを許しましたprop drilling エレガントに.今日まで、それは偉大でスケーラブルであり続けます.
私は何年もreduxと類似した解決を使いました、そして、常に私を悩ませる1つのものはそれを始めるために必要とされるボイラー板の量でした.Redux toolkit ほとんどがボイラープレートの問題を解決するが、優れた解決策と比較したときMobX , MST それはまだ中小規模のプロジェクトの詳細に見えた.
数週間前、私は適切なサイズの書き込み重いリファクションをしたかったcontext より良い解決策への状態、そして当然redux、mobxは心に浮かんだ.しかし、もっとシンプルでエレガントなものが欲しかった.
Zustand 救助に!
ドキュメントで述べられているように、「Zustandは小さくて、速くて、スケーラブルなBlabone状態管理解決です.フックに基づく快適なAPIを持っています.
私は本当にZustandを使用する動機は、それがどのようにそれを開始するためだった簡単だったと偉大な機能のようなtransient updates よく起こる状態変化のためにmemorized selectors , インテグレーションimmer ! アンドベストProviders !!
の基本的なストアの例をZustandを使用して入力しましょう.

インストールスタンド

yarn add zustand

ストアの作成

import create, { SetState, GetState } from 'zustand';

type CountStore {
  count: number;
  increment: () => void;
};

const useCountStore = create<CountStore>((set: SetState<CountStore>, get: GetState<CountStore>) => ({
  count: 0,
  increment: (): void =>  {
    const { count } = get();
    set({ count: count + 1 });
  }
});

create 二つの引数を与えるset and get . The set 関数(あなたは正しい推測)は、setState クラスベースの反応コンポーネントで.とget 関数は、ストア内の現在の状態にアクセスできます.特に、アクション内の状態にアクセスしたい場合に役立ちます.非常に便利!

コンポーネントの使用法
さて、フックを使っている部品でどのように我々の店を利用できるかを見ましょう!

function Counter(): React.ReactElement {
  const count = useCountStore(state => state.count);
  const increment = useCountStore(state => state.increment);

  return (
    <div>
      <h1>count: {count}</h1>
      <button onClick={increment}>+1</button>
    </div>
  );
}

店自体はセレクターフックとして機能する!きちんとした.することもできますmultiple selects 同じ.

const [count, increment] = useCountStore(state => [state.counter, state.increment]);

そして、それは、我々は今余分なボイラープレートコードなしで簡単な店があります.
私たちはまだZustandと表面をひっかいていません.過渡的な更新、immerの統合のような驚くべき機能のトン、セレクタ、非同期アクション、ミドルウェア….そしてリストが続く.私は、彼らがよりよく説明されるのを感じますdocs
うまくいけば、この記事はZustandに簡単な紹介として役立ちます.今まで私は本当にそれを楽しんでいます.
あなたは既にZustandを使用していますか?または私とすべてのことJavaScriptを話すか?Twitterで見つけてください