Zoostandを用いた反応フックによる状態管理の簡素化

当初はmy blogに掲載された.
国家管理はおそらく1つのアプリケーション開発の最も困難な部分です.さらに重要なのは、それはまた、権利を得るために最も重要な部分です.この記事は、新しい概念を使用してアプリケーションの状態管理を簡素化することです.我々は、そのコアにフックを持ってこれを解決するためにZustandを使用します.この記事の基本をカバーする、我々はシンプルなtodoアプリを作成します.React Hooksはすべての操作を実行するために使用されているので、基本的なフックの知識は、Zustandで州管理を介して航海する必要がありますすべてです.

どのようなZustandですか?
Zustandはシンプルで、軽量、高速であり、フックベースの状態管理を反応させる.

A small, fast and scaleable barebones state-management solution. Has a comfy API based on hooks, isn't boilerplate-y or opinionated, but still just enough to be explicit and flux-like.

機能
ライト級

.

リトルフックまたは学習曲線.

は、状態を消費する主要な手段をフックにします.

独断的でない.

過渡的な更新.

利便性から離れて、Zustandは、複雑な流れのような他のライブラリとの一般的な問題のいくつかを解決します.また、主要な既存のライブラリやパターンは、Context loss issue、React concurrency issues、Zombie child problemのようないくつかの一般的な文書の問題を解決します.

使い方は?
デモするには、我々は基本的なtodoアプリケーションを作成します.私たちは店を作ることから始めます.それから、todosの配列を初期化して、todoをリストに加える機能を加えてください.

import create from 'zustand';

const useStore = create((set) => ({
  todos: [],
  add: (title) =>
    set((state) => ({ todos: [...state.todos, { title }] }))
}));

次に、ストア内で定義した状態をコンポーネントに添付します.

import { useStore } from './store';

function TodoList() {
  const todos = useStore((state) => state.todos);
  return (
    <div>
      {todos.map(({ title }) => (
        <div>{title}</div>
      ))}
    </div>
  );
}

最後に、ボタン要素に定義したadd関数を追加します.入力値をToDo項目のタイトルとして渡します.

import { useStore } from './store';

function TodoInput() {
  const [inputValue, setInputValue] = React.useState('');
  const add = useStore((state) => state.add);
  return (
    <div>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={() => add(inputValue)}> Add </button>
    </div>
  );
}

ET Voila、我々はtodoアプリの基本的なバージョンの作業があります.getとsetの同じパターンは、すべての種類の操作のためのアプリケーション全体で使用することができます.また、同じラインに沿ってtoggleDoneとremove関数を作成しました.あなたは完全な機能の下のサンドボックスをチェックすることができます.

先進機能
大規模なプロジェクトについては、我々は多くのだけでなく、CRUD操作よりも必要ですが、Zustandもあなたが覆われている.これには、次のサポートがあります.

非同期操作:あなたが準備ができているときは、ちょうどsetを呼び出す必要があります.

ミドルウェア:あなたのミドルウェアを作成し、パイプを好きなように.

*複数のストアフェッチ*:あなたが好きなように多くのセレクタを作成することができます.

devtools :内蔵のdevtoolミドルウェアを提供します.

Reduxを使用してください:あなたはまだ還元器とアクションパターンを使用する場合は、あまりにもここにそれを従うことができます.

入れ子状態の処理:入れ子構造の操作は面倒です.しかし、あなたはミドルウェアとしてimmerを使うことができます.

欠点
Zustandのドキュメントは簡潔で、良いフローを持っていて、非常に理解しやすいですが、複数のミドルウェアを扱うこと、ネストした状態を管理したり、パフォーマンスを向上させるためのコードの最適化など、いくつかのセクションで詳細を説明したり、使用することもできます.したがって、Zustandに貢献してください.

Caution: You Might Not Need Redux(or any other state management library)

結論
Zustandを使用すると、非常に便利ですし、情報の読み込みを開始する必要はありません.ときに経験豊かな状態管理ソリューションと比較すると、それは間違いなくエッジにDXになる.そのシンプルさ、柔軟性、および独断的な性質は、それを説得力のあるオプションにします.それで、あなたが州管理を扱う初心者であるならば、あるいは、あなたが深く入れ子にされた構造に対処しないプロジェクトを持っているならば、Zustandはあなたのプロジェクトにとって大きな発作であるかもしれません.