React での状態処理をレベルアップ: Zustand を使用すると、Redux よりもプロのように状態を管理できるのはなぜですか?

ラバ・アリ・シャー

フォローする

聞く

状態の管理は、アプリケーションを構築する際にすべての開発者が直面する最も困難な部分の 1 つです。間違いなく、いくつかの React Hook を使用することでこの問題は解決できますが、大規模なアプリでは状態の管理がますます複雑になる可能性があります。このような場合、useState や useReducer などの非常に一般的な React フックに単純に依存することはできません。どのライブラリも特定の問題に対する解決策を提供するためです。 React の場合、より複雑なステートメント管理のために、Dan Abramov は Redux と呼ばれるライブラリを導入しました。

Redux には、React アプリ全体で独立して利用できる集中ストアという素晴らしいコンセプトが付属しています。この概念により、開発者はコンポーネントの現在の状態の取得や操作について心配する必要がなくなります。必要なのは、React アプリのトップレベルでプロバイダーにストアをラップし、現在の状態を読み取りまたは操作したいコンポーネントで Redux フックを使用してインポート関数をラップすることだけです。

Redux ストアの作成:

これは、初期状態、現在の状態を更新するために状態に対して実行するリデューサー関数またはアクションを含む Redux ストアを作成する方法です。この場合、このストアには実際には、「増分」ボタンまたは「減分」ボタンをクリックして値を加算または減算する単純なカウンターのすべてのロジックが含まれています。

ストアを作成したら、それを React コンポーネントにバインドします。

アプリのindex.jsファイルに加えて、アプリにReduxストアを提供します。簡単に言うと、React アプリの最上位でストアを宣言し、その状態がすべての子要素で利用できるようにします。

次に、Redux ストアを使用するファイルに移動します。

Redux ストアからデータを取得するには useSelector フックが必要です。その後、useDispatch フックを使用してアクションを呼び出して状態を更新できます。

これが Redux で状態を管理する方法です。

あなたが気づいたかもしれない問題は、Redux の長い定型文です。このような単純なロジックを管理する場合でも、上記の Redux ボイラープレートをすべて設定する必要があります。データを取得するには追加の useSelector フックが必要で、アクションを呼び出すには useDispatch フックが必要であるため、Redux で何が起こっているのかを理解するのが複雑になる場合があります。状態管理がより複雑になる大規模なアプリで使用すると、多忙になります。

この問題を解決するのが Zustand です。これは、簡素化されたフラックス原理を使用した、小型、高速、スケーラブルな React 状態管理ソリューションです。 Zustand には、状態を管理し、アプリ全体で利用できる集中ストアという同じコンセプトが付属しています。

Zustand の最も優れた点は、Redux とは異なり、状態の読み取り、呼び出し、操作に長い定型文を設定したり、追加のフックを使用したりする必要がないことです。必要なのは、ストアを作成し、それを React アプリ内のどこでも簡単に使用することだけです。プロバイダーをアプリのトップレベルでラップする必要はありません。

条件ストアの作成:

Zustand でストアを作成するのがいかに簡単かをご覧ください。 create関数を使うだけです。 Zustandでストアを作成したら。今度は、ストアからデータを読み取るコンポーネントにそれをバインドします。

これは、リデューサー関数、いわゆるアクションを呼び出す方法です。アクションをインポートして呼び出すだけです。それでおしまい！アクションを読み取ってディスパッチするための追加のフックは必要ありません。インポートして使用するだけです。

上記のすべてのコード、Zustand のシンプルさ、Redux との比較を見て、答えが得られたことを願っていますが、引き続き Zustand を使用することで得られる特典をいくつか紹介します。

より複雑で大規模なアプリケーションでは、状態の管理が困難になる場合があります。 Redux や useContext、useReducer などのフックが私たちを助けてくれることは間違いありません。しかし、問題は、長くて複雑な定型設定があり、状態を管理する際の Redux の使いやすさが低下することです。

Zustand は、React アプリ向けの小型、高速、スケーラブルな状態管理ソリューションです。そのシンプルさ、定型的な設定の少なさ、そしてユーザーフレンドリーな状態管理動作により、Redux よりも有利になります。 Zustand を制作に自由に使用して、クリーンでシンプルな方法で状態を管理するその美しさをお楽しみください。