文脈API対RUDUXを使うとき

誰かが私に尋ねるならば、どんなウェブサイトの最も重要な部分であるか.私の答えはいつも同じです.これは、アプリケーションの状態です.結局のところ、それはユーザーが何を見るかを決定している状態です.
反応して、各々の構成要素はそのローカル状態を有する.この部分は、コンポーネント内で起こっていることを追跡するために使用することができます.しかし、我々は全体としてアプリケーション内で起こっていることを追跡するときは、ローカル州はもはや十分です.これらの状況のために、我々はグローバルな状態を使用する必要があります.
反応のためのグローバル州の管理を選択するには、我々は多くのオプションを選択する必要があります.長い間、Reduxは最も人気のある選択であるようでした.しかし、コンテキストAPIが導入されたとき、開発者はすぐにそれを採用し始めた.いくつかのシナリオでは、彼らはreduxをコンテキストに置換し始めました.そして、このすべてが起こって、1つの大きい質問が起こり始めました.🗽
文脈API対Reduxを使うとき?
あなたが小道具を通過するのを避けるためにreduxを使用しているならば、あなたはそれを文脈APIと取り替えることができます.コンテキストは、コンポーネント間の状態の些細な部分を共有するために最適です.Reduxははるかに強力であり、コンテキストが持っていない便利な機能のセットを提供します.それは集中管理の状態と処理のAPI要求の管理に最適です.

文脈APIとReduxの違い
これらの2つのライブラリの主な違いは、Reduxが集中的に状態の変化を扱うことです.一方、コンテキストはコンポーネントレベルで発生します.しかし、これらの2つのライブラリの違いについてのより良い考えがあるために、我々は別々に各々を見なければなりません.

コンテキストAPI

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

コンテキストAPIは、反応の世界ではかなり新しい概念です.その主な目的は、小道具やアクションを使用せずにコンポーネント間のデータを共有することです.これは、テーマ、または好ましい言語などの反応コンポーネントのツリーのグローバルと考えられるデータを共有するように設計されています.コンテキストは、アプリケーションの状態管理の複雑さを大幅に減らすことができます.🚀
2つのコア概念があります.

プロバイダー

消費者

プロバイダの仕事を定義し、特定の部分の状態を追跡することです.この状態は、Providerの内部にネストされている全ての子によってアクセスすることができる.これらの子供たちは通常消費者と呼ばれる.Consumerは、文脈Providerから状態にアクセスしているかまたは修飾しているあらゆるコンポーネントである.

リドゥ

Redux helps you write applications that behave consistently, run in different environments, and are easy to test. Centralizing your application's state and logic enables powerful capabilities like undo/redo, state persistence, and much more.

Reduxは、集中的にデータフローを管理するのに役立つJavaScriptライブラリです.これは、アプリケーションの全体の状態を格納します.この状態は、1つのコンポーネントから別のコンポーネントへの小道具を通過させることなく、任意のコンポーネントによってアクセスすることができます.3つのコア概念があります.

のアクション

リダーズ

ストア

アクションはREDUXストアにデータを送るイベントです.彼らはユーザーの相互作用によって引き起こされるか、または直接アプリケーションによって呼び出されます.それぞれのアクションは、固有の型とペイロードを関連付けられている必要があります.例の動作はこのようになります.👇

{ 
  type: "SIGN_IN",
  payload: {
    email: "[email protected]",
    password: "12345"
  }
}

アクションをディスパッチすると、リダクタが実行されます.還元子は現在の状態を取り、受け取ったアクションに基づいて新しい状態を返す関数です.
このすべては店の中で起こっています.ストアには責任があり、責任はアプリケーションの状態を保持することです.それは非常にreduxを使用して任意のアプリケーションで1つだけのストアを維持することをお勧めします.
今、我々は両方のReduxとコンテキストの作品を理解しています.両方のアプリケーションを見る時間です.

コンテキストAPIアプリケーション
文脈は、現在の認証されたユーザー、テーマまたはユーザー言語のようなグローバルデータを共有するのに使用するのに理想的です.
さて、我々の反応アプリケーションのthemeプロパティを追跡するコンテキストを実装しましょう.

import React, { useContext, useState } from "react";

// Settings default values
// These well later be overwritten by specifying 'value'
const ThemeContext = React.createContext({
  theme: "light",
  setTheme: () => "",
});

const App = () => {
  const [theme, setTheme] = useState("light");

  return (
    // Wrapping App component with Theme provider
    // All the children can now access theme property
    // Additionaly, they can change the theme property
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Hello />
    </ThemeContext.Provider>
  );
};

// Consumer of the Theme context
// Checks the value of the theme and changes the color based on the theme 
const Hello = () => {
  const { theme } = useContext(ThemeContext);

  return (
    <h1 style={{ color: theme === "light" ? "black" : "white" }}>Hello 👋</h1>
  );
};

上の例で見ることができるように、コンテキストでは動作のために多くのセットアップとボイラープレートコードを必要としません.
その上に、反応ライブラリのデフォルトで含まれているので、任意の依存関係をインストールする必要はありません.👌

Reduxアプリケーション
Reduxは、一般的に状況で使用されます.

出願は多くの構成要素に必要な大量の状態を有する.

アプリケーションの状態が頻繁に更新されます.

アプリケーション状態を更新するロジックは複雑です.

Reduxの理想的なユースケースをよりよく理解するために.アプリケーションユーザーのリストを追跡する状態を実装しましょう.

const initialState = [];

const usersReducer = (state = initialState, action) => {
  switch (action.type) {
    case "SET_USERS":
      return action.payload;
    case "ADD_USER":
      return [...state, action.payload];
    case `EDIT_USER`:
      const newState = [...state];
      const index = newState.findIndex((item) => item.id === action.payload.id);
      newState[index] = action.payload;
      return newState;
    case "DELETE_USER":
      return state.filter((user) => item.id !== action.payload.id);
    default:
      return state;
  }
};

Reduxを初期化するには、アプリケーション全体をRedux Providerにラップし、ストアを初期化する必要があります.

import { Provider } from "react-redux";

import userReducer from "./reducers/userReducer";

// Creating instance of a store
const store = createStore({
  users: userReducer,
});

const App = () => {
  // Setting the store instance
  return <Provider store={store}>...</Provider>;
};

export default App;

最後の部分は状態にアクセスします.そして、それはコンポーネントを州に接続することによってされることができます.

import React from "react";
import { connect } from "react-redux";

const Users = ({ users }) => {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

const mapState = ({ users }) => ({
  users,
});

export default connect(mapState)(Users);

これはReduxの力を発揮する非常に些細な例であった.あなたが想像できるように、reduxはるかに複雑な状態を処理するために使用することができます.結局この目的のために建てられた.

Redux is trying to simplify managing complicated states by providing us with a set of useful tools, like Redux Dev Tools, state persistence, asynchronous actions, etc...

その他の状態管理ツール
本論文では,反応文脈apiをreduxと比較することを試みた.しかし、あなたが推測するかもしれないように、彼らはそこに唯一の国家管理ツールではありません.実際には、独自の方法で州の管理を扱う多くの他のツールがあります.🕺🏻
このセクションでは、私たちはそれらのいくつかを言及するつもりです.

We're not encouraging you to use these tools, nor we're saying they are better than Redux or Context API. We just simply want to spread the word.

応答クエリ
応答クエリは、特にデータフェッチの周りの状態管理を処理するために開発されました.それは多くのヘルパーを提供します.
詳しくは、Documentation hereを読んでください.

反跳する
Creilはかなり新しい状態管理ツールFacebookによって開発されました.それはまだ積極的に開発されています.反跳では、状態の各部分は、原子と呼ばれ、原子はセレクタと組み合わせることができます.Atomとセレクタを結合して、アプリケーションに固有のデータ構造を作成できます.
あなたはhereを学ぶことができます.

モブックス
MobXはクラスベースのアプローチを実装します.そして、Mobxの後ろの全体の考えは、国家管理を「観察可能」にすることです.あなたはMobx hereについての詳細を読むことができます.

思考の結論
状態管理は、すべてのWebアプリケーションが必要とするものです.我々が反応アプリケーションで世界的な状態を管理する方法を決定しているとき.一般的に質問されている質問は:ときにコンテキストAPI対Reduxを使用する.コンテキストAPIとreduxがどのように動作するかを理解することが重要です.また、あなたのユースケースのための正しいツールを選択することも重要です.
本論文では,コンテキストとreduxの基本例を紹介した.これらのライブラリの理想的なユースケースについて述べた.しかし、最も重要なことは、我々はいつのAPI APIを使用してRedUxの質問に答えた.あなたのポケットの中でこの知識を使用すると、正しくコンテキストAPI対Reduxを使用するときに決定することができます.👍