フック+コンテキストを使用してください

Reduxは必要なコードの過剰量を使用してコードベースに複雑さの多くを紹介します.これは、反応アプリケーションでの状態管理の不完全なソリューションになります.
私は、状態管理のための反応文脈APIを導入して、あなたがReduxより良い解決を文脈APIに加えていることを示します.
反応文脈API
コンテキストは、すべてのレベルで手動で小道具を渡すことなく、コンポーネントツリーを介してデータを渡す方法を提供します.
反応文脈APIは、直接接続されない複数の構成要素の状態を管理する反応の方法です.
コンテキストを作成するには、createContext を返します.

import React from 'react';
const newContext = React.createContext({ color: 'black' });

The createContext メソッドは、プロバイダーとコンシューマーコンポーネントを持つオブジェクトを返します.

const { Provider, Consumer } = newContext;

The Provider コンポーネントは、どれだけ深く入れ子になっても、すべての子要素に対して状態を利用できるようにします.The Provider コンポーネントは値propを受け取ります.これは現在の値を渡す場所です.

<Provider value={color: 'blue'}>
  {children}
</Provider>

The Consumer , 名前が示すように、Provider 支柱掘削(threading)の必要なしで

<Consumer>
  {value => <span>{value}</span>}}
</Consumer>

フックがなければ、コンテキストAPIはreduxと比較したときにあまり見かけないかもしれませんが、useReducer フック、我々は最終的に国家管理問題を解決する解決策を持っています.
The useReducer フック
何useReducer フックは反応16.8で来ました.JavaScriptのreduce ()メソッドと同じようにuseReducer フックは引数として2つの値をとります-還元関数と初期状態-そして新しい状態を返します.

const [state, dispatch] = useReducer((state, action) => {
  const { type } = action;
  switch(action) {
    case 'action description':
      const newState = // do something with the action
      return newState;
    default:
      throw new Error()
  }
}, []);

上記のブロックでは、状態と対応するメソッドを定義しました.dispatch , 取り扱い.我々が呼ぶときdispatch メソッドuseReducer() フックは、type このメソッドはaction引数で受け取ります:

...
return (
  <button onClick={() =>
    dispatch({ type: 'action type'})}>
  </button>
)

The useReducer フックプラスコンテキストAPI
我々が結合するとき、何が起こるかについて見ましょうuseReducer with Context API ために我々のアプリケーションの理想的なグローバル状態管理ソリューションを取得します.
私たちは店でグローバルな状態を作ります.jsファイル

// store.js
import React, {createContext, useReducer} from 'react';

const initialState = {};
const store = createContext(initialState);
const { Provider } = store;

const StateProvider = ( { children } ) => {
  const [state, dispatch] = useReducer((state, action) => {
    switch(action.type) {
      case 'action description':
        const newState = // do something with the action
        return newState;
      default:
        throw new Error();
    };
  }, initialState);

  return <Provider value={{ state, dispatch }}>{children}</Provider>;
};

export { store, StateProvider }

我々の店で.JSファイルはcreateContext() 以前に説明した反応からメソッドを作成し、新しいコンテキストを作成します.
覚えておいてくださいcreateContext() メソッドは、Provider and Consumer コンポーネント.今回は、私たちはProvider コンポーネントとしてuseContext フックが我々の状態にアクセスする必要があるとき.
我々の状態を操作する必要があるとき、我々はdispatch 所望のオブジェクトのメソッドとパスtype 引数として.
我々の中でStateProvider , 帰りましたProvider 値を持つ成分prop 、そしてdispatch からuseReducer フック.
世界的に我々の州にアクセスすること
グローバルに我々の状態にアクセスするために、我々は我々のルートをラップする必要があります<App/> コンポーネントStoreProvider それをレンダリングする前にReactDOM.render() 機能

// root index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { StateProvider } from './store.js';

const app = (
  <StateProvider>
    <App />
  </StateProvider>
);
ReactDOM.render(app, document.getElementById('root'));

さて、我々store コンポーネントツリー内の任意のコンポーネントからコンテキストをアクセスできます.これを行うには、useContext フックreact とstore 我々からストア.jsファイル

// exampleComponent.js
import React, { useContext } from 'react';
import { store } from './store.js';

const ExampleComponent = () => {
  const globalState = useContext(store);
  console.log(globalState); // this will return { color: red }
};

状態からのデータの追加と削除
我々は、我々が我々の世界的な州にアクセスする方法を見ました.
我々の州からデータを加えて、削除するために、我々はdispatch 方法からstore コンテキスト.我々は、コールする必要がありますdispatch メソッドと型を持つオブジェクトを渡すaction 私たちの定義StateProvider パラメータ)

// exampleComponent.js
import React, { useContext } from 'react';
import { store } from './store.js';

const ExampleComponent = () => {
  const globalState = useContext(store);
  const { dispatch } = globalState;

  dispatch({ type: 'action description' })
};

結論
Reduxは反応アプリケーションでの状態管理のために動作し、いくつかの利点がありますが、その冗長性はそれが本当にピックアップすることは困難になり、余分なコードのトンは、我々のアプリケーションでの作業を取得するために必要な不要な複雑さの多くを紹介します.
一方でuseContext APIと反応フックは、外部ライブラリをインストールしたり、ファイルやフォルダの束を追加する必要はありません我々のアプリの作業を得るために.これは、反応アプリケーションでのグローバルな状態管理を処理するためにはるかに簡単、より簡単な方法になります.