Redux を使用した最新の React

この記事では、状態管理のために Redux を React アプリケーションに統合することに重点を置き、最新の React に焦点を当てます。 useCallback などの高度な React 機能や、生産性を向上させる便利な VS Code 拡張機能について説明します。

コンセプトのハイライト:

1. mapStateToProps
2. mapDispatchToProps
3. React に Redux を追加する利点
4. Redux サンク
5. 減速機
6. セレクター
7. VS Code での React スニペット

1.mapStateToProps

Redux では、mapStateToProps は Redux ストアの状態を React コンポーネントの props にマップできるようにする関数です。これにより、コンポーネントは特定の状態にアクセスできるようになります。

構文:

const mapStateToProps = (state) => {
  return {
    data: state.data,
  },
};

例) この例では、mapStateToProps が Redux ストアからカウント値を抽出し、CounterComponent 内のプロップとして使用できるようにします。

const mapStateToProps = (state) => {
  count: state.counter.count,
});

export default connect(mapStateToProps)(CounterComponent);

2.mapDispatchToProps

mapStateToProps と同様に、mapDispatchToProps はディスパッチ アクションをプロパティにマップし、コンポーネントがアクションを Redux ストアにディスパッチできるようにします。

構文:

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
  },
};

例) この例では、mapDispatchToProps は、incrementCount をプロパティとして CounterComponent に提供し、呼び出されたときに increment() アクションをディスパッチできるようにします。

const mapDispatchToProps = (dispatch) => ({
  incrementCount: () => dispatch(increment()),
});

3. React に Redux を追加する利点

Redux は、特にアプリケーションが複雑になるにつれて、React アプリケーションを大幅に改善できます。主な利点は次のとおりです:

• 集中状態管理: Redux は、集中ストアで状態を管理することにより、信頼できる単一の情報源を提供します。これにより、アプリ全体の状態変化の管理が容易になり、予測可能性が向上します。

• 状態の永続性: Redux を使用すると、ページのリロードまたはルート間での状態の保存と永続化が簡単になり、UX がよりスムーズになります。

• デバッグとタイムトラベル デバッグ: Redux DevTools を使用すると、高度なデバッグが可能になり、すべてのアクションと状態の変化を検査したり、バグを修正するために以前の状態に戻ったりすることもできます。

• 懸念事項の分離: Redux はアプリケーションの状態を UI から分離し、コードの再利用性、保守性、テスト性を高めます。

4. リダックスサンク

Redux Thunk は、アクション オブジェクトの代わりに関数を返すアクション クリエーターを作成できるミドルウェアです。これにより、Redux アクション内で非同期操作 (API 呼び出しなど) を実行できるようになります。

構文:

 const fetchData = () => {
  return (dispatch) => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data }))
      .then(error => dispatch({ type: 'FETCH_ERROR', error }));
  };
};

例) この例では、fetchPosts は API からデータを取得し、リクエストの成功または失敗に基づいてアクションをディスパッチする非同期アクションです。

function fetchPosts() {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_POSTS_REQUEST' });
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const posts = await repsosne.json();
      dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: posts });
    } catch (error) {
      dispatch({ type: 'FETCH_POSTS_ERROR', error });
    }
  };
}

5.減速機

Reducers は、現在の状態とアクションを引数として受け取り、そのアクションに基づいて新しい状態を返す Redux の純粋な関数です。 Reducer は、Redux ストア内の状態を更新する責任を負います。

構文:

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT': 
      return { count: state.count + 1 };
    case 'DECREMENT': 
      return { count: state.count - 1 };
    default: 
      return state;
  }
}

例) この例では、counterReducer は 2 つのアクション、INCREMENT と DECREMENT を処理し、それに応じて状態のカウントを更新します。

const rootReducer = combineReducers({
  counter: counterReducer,
});

const store = createStore(rootReducer);

6. セレクター

セレクター は、Redux ストアから派生状態を抽出または計算するために使用される関数です。結果をメモ化することでパフォーマンスを向上させ、状態の一部にアクセスするための明確な API を提供します。

構文:

const selectCount = (state) => state.counter.count;

例) この例では、selectUserPosts は、現在のユーザーの ID に基づいて投稿をフィルターするメモ化されたセレクターです。セレクターを使用すると、不必要な再計算を回避してコードをより効率的にすることができます。

const selectUserPosts = createSelector(
  [state => state.posts, state => state.userId],
  (posts, userId) => posts.filter(post => post.userId === userId)
};

7. VS Code での React スニペット

VS Code でコーディングしている場合は、React Snippets 拡張機能をインストールすると、ワークフローが大幅に高速化されます。この拡張機能は、コンポーネント、フック、その他の一般的な React コード構造を作成するための便利なショートカットを提供し、ユーザーがコード テンプレートを活用してクリーンで一貫性のある React コードをより迅速に作成できるようにします。

例) rfc、rafc、または rafce の後に Tab キーを押すと、React 機能コンポーネント用に次のコードが生成されます。

import React from 'react'

const ComponentName = () => {
  return (
    <div>

    </div>
  )
}

以上がRedux を使用した最新の Reactの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。