web-dev-qa-db-ja.com

Reactフック：Reduxなどの共有状態管理に役立ちますか？

Reactフックについて。

これまでのところ、フックはステートフル機能コンポーネントに適していると理解していましたが、共有状態はどうですか？

reactjsreduxstate-managementreact-hooks
6
Nurbol Alpysbayev

いいえ、フックは完全にしませんので、Reduxは不要です。フックは主に、今日クラスを使用しなければならない機能を実装するための代替手段です。

  1. ローカルコンポーネントの状態
  2. 環境
  3. ライフサイクルの方法と副作用

上記以外にも、フックを使用すると、コンポーネント間でステートフルロジックを簡単に共有できます。

Reduxを強制終了/置換する可能性が高いのは、フックではなく context です。これは、コンポーネント間で状態を共有する方法です。しかし、IMOコンテキストはReduxストアほど強力ではありません。ミドルウェアや時間旅行機能を備えた特別な開発ツールなどの共有状態ストア以外にReduxが提供する他の機能があります。 Reduxを中心に構築された学習とツールのエコシステム全体もあり、そのコンテキストは現時点ではありません。

この例 のようなコンテキストと一緒にuseReducerフックを使用する場合、Reduxを使用するのと非常によく似ており、小さなアプリケーション（TodoMVCなど）で十分かもしれません。大規模なアプリの場合、コンテキストは1つだけではなく、useReducerで十分だと思います。それらを複数必要とする場合があります。Reduxを使用してストアを構成することが理にかなっています。複数のコンテキストとuseReducerフックを組み合わせることもできますが、Reduxを使用する方が簡単です。

12
Yangshun Tay

いいえ、フックはReduxに置き換わるものではありませんが、よりクリーンなコードを記述するのに役立ちます。また、ローカル状態またはライフサイクルメソッドを使用するためだけにクラスコンポーネントを記述する必要はありません。それはまさにそこにある素晴らしいユースケースです。

以前は、Reduxを使用して、コンポーネントの各再レンダリング間で状態が永続的であることを確認する必要がありました。しかし今では、useState（）メソッドを使用して永続的なローカル状態を実装できます！ Reactライフサイクルメソッドの代わりにuseEffect（）を使用できます。useReducerを使用して、クイックアクションクリエータメソッドを記述し、グローバル状態にアクセスできます!!

seReducer（）メソッドの使用方法に関する良い記事です。

2
xeiton

はい、まだ公式の機能ではないようです。まだ機能提案中です。ステージ。多くの人は、リアクションコンテキストがリデュースをゴミに捨てると考えていましたが、そうではなかったことがわかりました。

1
Auriga

フックとコンテキストは、Reduxの代わりにアプリケーションの状態を管理するためのものではありません。

コンテキストは、大規模で入れ子になったエンタープライズレベルのアプリケーションで親から子に情報を伝達するという悪夢を解決するという点で、小道具に似ています。欠点は、コンテキストがもう少し複雑であり、それを設定するのが苦痛になる可能性があることです。

フックを使用するだけで、クラスベースのコンポーネントに変換することなく、アプリケーションの状態にフックできる機能コンポーネントを使用できます。

混乱は、従来のReduxセットアップなしでuseReducerのようなフックを使用してReduxから機能を取得できることにあります。

ブログアプリケーションで作業していて、ブログ投稿を更新する機能を追加したい場合は、次のようにuseReducerを適用できます。

const blogReducer = (state, action) => {
  switch (action.type) {
    case 'add_blogpost':
      return [...state, { title: `Blog Post #${state.length + 1}` }];
    default:
      return state;
  }
};

それがあなたのレデューサーになり、次のように適用されます：

export const BlogProvider = ({ children }) => {
  const [blogPosts, dispatch] = useReducer(blogReducer, []);

アクションオブジェクトをディスパッチするヘルパー関数を一時的に作成できます。

const addBlogPost = () => {
    dispatch({ type: 'add_blogpost' });
  };

それをあなたのバリュープロップに追加する必要があります、'add_blogpost'。とにかく、Reduxシステム全体を使用せずに、機能コンポーネントでReduxの側面を利用するだけの混乱した方法ですが、代わりに、代わりの方法ではありません。

0
Daniel

Reduxは単なる状態管理です。反応ライブラリではありません。 Reduxは任意のプロジェクトで使用できます。

将来的には、reduxコネクタ（react-redux）がフックによって削除または未使用になる可能性がありますが、Redux自体は素晴らしいライブラリです。

Reduxが不要なユースケースがもっとあるかもしれませんが、そうではありませんフックもコンテキストもReduxを「殺す」ことはありません。

Reduxは、以前は混乱の元だったエンタープライズアプリケーション内でReduxを使用していましたが、真実のソースはありませんでした。 Reduxは、コードベースとロジック内に順序を配置します。

0
Pooya Sabramooz