完全な Redux ツールキット - 非同期ロジック (パート -2)

1. Redux Toolkit の非同期ロジックの概要

Redux での非同期ロジックの処理には、さまざまな状態 (読み込み、成功、エラー) を処理するためのアクション タイプ、アクション クリエーター、リデューサーの作成など、多くの定型コードが含まれることがよくあります。 Redux Toolkit は、createAsyncThunk を使用してこれを簡素化し、最小限のセットアップで非同期操作の「サンク」を定義できるようにします。

createAsyncThunk:

• 保留中、履行済み、および拒否されたアクション タイプを自動的に生成します。
• API リクエストなどの副作用の処理が容易になります。
• createSlice を使用して作成されたスライスとシームレスに統合します。

2. API 呼び出しに createAsyncThunk を使用する

パブリック API からデータを取得し、さまざまな読み込み状態を管理するための非同期サンクを作成する手順を見てみましょう。

ステップ 1: シンプルな API サービスをセットアップする
この例を示すために、無料のパブリック API を使用します。投稿のリストを返す API エンドポイントがあると仮定しましょう。

ステップ 2: 非同期サンクの作成
まず、postsSlice.js という名前の新しいスライス ファイルを features/posts ディレクトリ内に作成します。 createAsyncThunk を使用して投稿を非同期に取得します。

// src/features/posts/postsSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Async thunk to fetch posts from an API
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  return data; // This will be the 'fulfilled' action payload
});

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    posts: [],
    status: 'idle', // idle | loading | succeeded | failed
    error: null,
  },
  reducers: {
    // Optional: add reducers for synchronous actions
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default postsSlice.reducer;

説明:

createAsyncThunk: この関数は、文字列アクション タイプと非同期関数の 2 つの引数を取ります。 async 関数は API 呼び出しが行われる場所です。 Promise が解決されると、データが返され、実行されたアクション ペイロードとして自動的にディスパッチされます。

extraReducers: これは、createAsyncThunk によって生成されたアクションを処理するために使用されます。保留中、履行済み、拒否という 3 つの状態を管理します。

3.サンクをコンポーネントに統合する

次に、React コンポーネントで fetchPosts サンクを使用してデータを表示しましょう。

ステップ 1: PostsList コンポーネントを作成する
features/posts ディレクトリに PostsList.js コンポーネントを作成します:

// src/features/posts/PostsList.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts } from './postsSlice';

const PostsList = () => {
  const dispatch = useDispatch();
  const posts = useSelector((state) => state.posts.posts);
  const status = useSelector((state) => state.posts.status);
  const error = useSelector((state) => state.posts.error);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchPosts());
    }
  }, [status, dispatch]);

  let content;

  if (status === 'loading') {
    content = <p>Loading...</p>;
  } else if (status === 'succeeded') {
    content = (
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    );
  } else if (status === 'failed') {
    content = <p>{error}</p>;
  }

  return (
    <section>
      <h2>Posts</h2>
      {content}
    </section>
  );
};

export default PostsList;

説明:

useEffect フックは、コンポーネントのマウント時に fetchPosts を送出しますが、これは現在のステータスが「アイドル」の場合に限ります。
ステータスがチェックされて、どのコンテンツをレンダリングするかが決定されます (スピナー、投稿のリスト、またはエラー メッセージの読み込み中)。

ステップ 2: PostsList をアプリに追加する

メインの App.js ファイルを更新して PostsList コンポーネントを含めます:

// src/App.js
import React from 'react';
import PostsList from './features/posts/PostsList';

function App() {
  return (
    <div className="App">
      <PostsList />
    </div>
  );
}

export default App;

4.非同期サンクのベスト プラクティス

コンポーネント内の重いロジックを避ける: 非同期ロジックを処理するためにサンクをディスパッチすることで、コンポーネントをクリーンな状態に保ちます。
エラー処理を一元化: 各コンポーネントでロジックを繰り返すのではなく、スライスでエラーを処理します。
データの正規化: 複雑なデータ構造を効率的に管理するには、normalizr などのライブラリを使用して状態形状を正規化することを検討してください。
セレクターのメモ化: パフォーマンスを向上させるために、createSelector from reselect を使用してセレクターをメモ化します。

5.結論と次のステップ
このパートでは、createAsyncThunk を使用して Redux Toolkit で非同期ロジックを処理する方法を検討しました。非同期サンクを作成し、さまざまな状態を処理し、それをコンポーネントで使用する方法を学びました。次のパートでは、Redux 開発をさらに簡素化するデータのフェッチとキャッシュのための強力なツールである RTK クエリについて詳しく説明します。

_
パート 3: RTK クエリの概要をお楽しみに!_

以上が完全な Redux ツールキット - 非同期ロジック (パート -2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。