Redux ToolkitのcreateSliceを活用した効率的な状態管理入門

React開発において、状態管理はアプリケーションの複雑さが増すにつれて重要性を増します。しかし、従来のReduxでは、ボイラープレートコードや非同期処理の煩雑さが課題となっていました。こうした課題を解決するために登場したのが、Redux Toolkitです。特に、そのcreateSlice機能は、状態管理を簡素化し、開発効率を飛躍的に向上させます。本記事では、createSliceの基本的な使い方から、実際のプロジェクトでの応用までを詳しく解説します。これにより、React開発での状態管理を効率化する方法を学びましょう。

Redux Toolkitとは
状態管理の課題
createSliceの基本構文
サンプルコードで学ぶ状態管理
非同期処理とcreateSlice
大規模プロジェクトでの利用例
createSliceとRTK Queryの連携
状態管理のベストプラクティス
まとめ

Redux Toolkitとは

Redux Toolkitは、Redux公式が提供する開発ツールキットで、Reduxをより使いやすく、効率的にするために設計されています。これにより、従来のReduxで問題となっていた以下のような課題が解消されます。

Redux Toolkitの主な特徴

ボイラープレートコードの削減
Reduxで一般的なアクションやリデューサーの冗長なコードを大幅に削減します。
非同期処理の簡素化
Redux Toolkitは、createAsyncThunkを利用して非同期処理を簡潔に実装できるようにします。
ベストプラクティスの組み込み
Redux Toolkitは、状態管理のベストプラクティスが組み込まれているため、初学者でも間違いにくい設計となっています。

Redux Toolkitが提供する機能

createSlice: 状態管理を簡素化するための主要機能。アクションとリデューサーを同時に定義できます。
createAsyncThunk: 非同期アクションを簡単に作成するためのユーティリティ。
configureStore: Reduxストアの設定を簡略化し、ミドルウェアや非同期処理の組み込みを容易にします。
RTK Query: サーバーとのデータ同期やキャッシュを効率的に行うためのツール。

なぜRedux Toolkitを使うべきか

Redux Toolkitは、従来のReduxの柔軟性を保ちながら、開発の効率性を大幅に向上させます。これにより、状態管理にかかる時間を短縮し、ビジネスロジックに集中できるようになります。特に、状態管理が複雑化しやすい中・大規模アプリケーション開発において、その効果を実感できるでしょう。

状態管理の課題

従来のReduxの課題

Reduxは、Reactアプリケーションで状態を一元管理するための強力なライブラリです。しかし、その柔軟性の高さゆえに、以下のような課題が生じることがあります。

1. ボイラープレートコードの多さ

Reduxでは、アクションタイプ、アクションクリエーター、リデューサーなどを個別に記述する必要があり、コード量が膨大になりがちです。この冗長性が学習曲線を急にし、開発のスピードを低下させる原因となります。

2. 非同期処理の複雑さ

非同期処理を扱う際に、Redux ThunkやRedux Sagaといったミドルウェアを導入する必要がありますが、これらの設定やロジックが複雑になりやすいです。

3. 初期設定の煩雑さ

Reduxを導入する際、ストアの構築やミドルウェアの設定が初心者には難解で、エラーの原因となることが少なくありません。

4. 状態のスケールが困難

大規模アプリケーションでは、状態のスケールが増えるほどコードの管理が難しくなり、メンテナンス性が低下します。新しい機能を追加するたびに、多くのファイルを修正する必要が出てくるため、開発効率が落ちます。

課題が引き起こす問題

これらの課題により、以下のような問題が発生します。

状態管理に時間が取られ、本来のアプリケーションロジックに集中できない。
コードの可読性が低下し、チーム開発でのコミュニケーションコストが増加する。
状態のバグや競合が発生しやすくなる。

Redux Toolkitによる解決

こうした課題を解決するために登場したのがRedux Toolkitです。特に、createSliceを使用することで、ボイラープレートコードを削減し、非同期処理や初期設定の複雑さを解消します。次章では、createSliceの基本構文について詳しく解説します。

createSliceの基本構文

Redux ToolkitのcreateSliceは、Reduxの状態管理を簡素化するための強力な機能です。これにより、アクションとリデューサーを1つの場所で定義し、効率的に状態を管理することができます。

基本的なcreateSliceの構文

以下は、createSliceの基本的な使用例です。

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter', // 状態の名前
  initialState: { value: 0 }, // 初期状態
  reducers: {
    increment: (state) => {
      state.value += 1; // ミュータブルな操作が可能（Immerライブラリを利用）
    },
    decrement: (state) => {
      state.value -= 1;
    },
    reset: (state) => {
      state.value = 0;
    },
  },
});

export const { increment, decrement, reset } = counterSlice.actions; // アクションをエクスポート
export default counterSlice.reducer; // リデューサーをエクスポート

構文の詳細解説

1. `name`

スライスの名前を指定します。この名前は、アクションタイプのプレフィックスとして使用されます（例: counter/increment）。

2. `initialState`

このスライスで管理する状態の初期値を設定します。オブジェクトや配列など、任意の構造を持つことができます。

3. `reducers`

状態を変更するための関数（リデューサー）を定義します。関数名はそのままアクション名となり、対応するアクションタイプも自動的に生成されます。

4. アクションとリデューサーのエクスポート

actions: 定義されたリデューサーに対応するアクションをエクスポートします。
reducer: Reduxストアに登録するためのリデューサーをエクスポートします。

createSliceの利点

コードの簡素化
アクションとリデューサーが一箇所にまとまるため、可読性が向上します。
ミュータブルな操作の許可
Immerライブラリの利用により、状態を直接変更する記述が可能ですが、実際にはイミュータブルに処理されます。
アクションタイプの自動生成
アクションタイプやアクションクリエーターを手動で記述する必要がなくなります。

次のステップ

次の章では、createSliceを使った具体的なサンプルコードを示し、実際の状態管理方法を解説します。これにより、実務での活用イメージがより明確になるでしょう。

サンプルコードで学ぶ状態管理

createSliceを用いた状態管理を、具体的なReactアプリケーションの例を通じて学びましょう。この例では、カウンター機能を実装します。

ステップ1: Reduxストアの設定

まず、createSliceを使って状態管理のためのスライスを作成します。

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
    reset: (state) => { state.value = 0; },
  },
});

export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;

次に、ストアを設定します。

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

ステップ2: Reactコンポーネントでの利用

作成したスライスをReactコンポーネントで利用します。

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, reset } from './counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.value); // 状態の選択
  const dispatch = useDispatch(); // アクションの送信

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(reset())}>Reset</button>
    </div>
  );
};

export default Counter;

ステップ3: アプリケーションの統合

Reactアプリケーション全体でReduxを使用するため、Providerでストアをラップします。

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);

export default App;

動作確認

アプリケーションを実行すると、カウンター機能が動作するはずです。以下の操作が可能です。

Increment: カウントを1増やす。
Decrement: カウントを1減らす。
Reset: カウントを0にリセットする。

コードから学べるポイント

状態管理の簡素化
createSliceにより、アクションとリデューサーを1つのモジュールにまとめ、管理が容易になりました。
Redux Toolkitの強力な機能
ストアの設定や状態の操作がシンプルになり、ボイラープレートコードが削減されます。
Reactとの統合の容易さ
useSelectorとuseDispatchを使用して、状態の読み取りとアクションの送信を簡単に実現できます。

次の章では、非同期処理をcreateSliceで効率的に扱う方法を解説します。

非同期処理とcreateSlice

非同期処理は、データの取得や外部APIとの通信を行う際に不可欠な要素です。Redux Toolkitは、createAsyncThunkを使用することで、非同期処理を簡潔に実装する方法を提供しています。本章では、createSliceとcreateAsyncThunkを組み合わせた非同期処理の実装方法を解説します。

ステップ1: createAsyncThunkの基本構文

以下は、createAsyncThunkを使用した非同期アクションの基本例です。

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchData = createAsyncThunk(
  'data/fetchData',
  async (endpoint, thunkAPI) => {
    const response = await fetch(endpoint);
    if (!response.ok) {
      throw new Error('Failed to fetch data');
    }
    return response.json();
  }
);

アクションタイプ: 'data/fetchData'は、この非同期処理に関連付けられるアクションタイプです。
非同期関数: 実行したい非同期処理を記述します（例: fetchでAPIリクエストを送信）。
thunkAPI: ディスパッチや状態へのアクセスなど、追加のユーティリティが含まれています。

ステップ2: createSliceで非同期アクションを処理

createSliceでは、extraReducersを利用して非同期アクションの状態変化を管理します。

import { createSlice } from '@reduxjs/toolkit';
import { fetchData } from './dataActions';

const dataSlice = createSlice({
  name: 'data',
  initialState: {
    items: [],
    status: 'idle', // 'idle' | 'loading' | 'succeeded' | 'failed'
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchData.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default dataSlice.reducer;

ステップ3: Reactコンポーネントでの利用

Reactコンポーネントで非同期アクションをディスパッチし、状態を使用します。

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchData } from './dataActions';

const DataList = () => {
  const dispatch = useDispatch();
  const { items, status, error } = useSelector((state) => state.data);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchData('https://api.example.com/data'));
    }
  }, [dispatch, status]);

  if (status === 'loading') return <p>Loading...</p>;
  if (status === 'failed') return <p>Error: {error}</p>;

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default DataList;

コード解説

非同期アクションのディスパッチ
コンポーネントのマウント時にdispatch(fetchData())を呼び出し、非同期処理を実行します。
状態のトラッキング
statusプロパティで、非同期処理の進行状況（idle, loading, succeeded, failed）を追跡します。
エラー処理
非同期処理が失敗した場合、errorプロパティを使用してエラーメッセージを表示します。

非同期処理での注意点

エラーハンドリング: createAsyncThunkを使用すると、エラーが自動的にキャッチされ、rejected状態に移行します。独自のエラー処理ロジックを追加することも可能です。
効率化の工夫: 再リクエストを避けるため、statusを確認してから非同期処理を実行するようにしましょう。

このように、createAsyncThunkとcreateSliceを組み合わせることで、非同期処理を簡潔かつ効率的に実装できます。次章では、これをさらに発展させ、大規模プロジェクトでの利用例を解説します。

大規模プロジェクトでの利用例

大規模なReactアプリケーションでは、状態管理がさらに複雑になります。このような環境でも、Redux ToolkitのcreateSliceとcreateAsyncThunkは、効率的な状態管理をサポートします。本章では、大規模プロジェクトにおけるcreateSliceの活用例を解説します。

複数のスライスによるモジュール化

大規模プロジェクトでは、状態を機能ごとに分割して管理するのが一般的です。以下は、ユーザー情報と商品リストを管理する例です。

// userSlice.js
import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: { profile: null, status: 'idle', error: null },
  reducers: {
    login: (state, action) => {
      state.profile = action.payload;
    },
    logout: (state) => {
      state.profile = null;
    },
  },
});

export const { login, logout } = userSlice.actions;
export default userSlice.reducer;

// productSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const fetchProducts = createAsyncThunk('products/fetchProducts', async () => {
  const response = await fetch('https://api.example.com/products');
  return response.json();
});

const productSlice = createSlice({
  name: 'products',
  initialState: { items: [], status: 'idle', error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchProducts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchProducts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchProducts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default productSlice.reducer;

統合されたReduxストア

複数のスライスを組み合わせて、ストアを設定します。

// store.js
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';
import productReducer from './productSlice';

const store = configureStore({
  reducer: {
    user: userReducer,
    products: productReducer,
  },
});

export default store;

Reactコンポーネントでの使用

Reactコンポーネントでは、スライスごとの状態を簡単に操作できます。

// App.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchProducts } from './productSlice';
import { login, logout } from './userSlice';

const App = () => {
  const dispatch = useDispatch();
  const user = useSelector((state) => state.user.profile);
  const products = useSelector((state) => state.products.items);
  const productStatus = useSelector((state) => state.products.status);

  useEffect(() => {
    if (productStatus === 'idle') {
      dispatch(fetchProducts());
    }
  }, [dispatch, productStatus]);

  const handleLogin = () => {
    dispatch(login({ id: 1, name: 'John Doe' }));
  };

  const handleLogout = () => {
    dispatch(logout());
  };

  return (
    <div>
      <h1>Welcome, {user ? user.name : 'Guest'}</h1>
      <button onClick={user ? handleLogout : handleLogin}>
        {user ? 'Logout' : 'Login'}
      </button>
      <h2>Products</h2>
      {productStatus === 'loading' ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {products.map((product) => (
            <li key={product.id}>{product.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default App;

大規模プロジェクトでの利点

分離されたスライス管理
各機能（ユーザー、商品など）ごとにスライスを分割することで、コードの責任範囲が明確になり、メンテナンス性が向上します。
効率的な非同期処理
createAsyncThunkを活用することで、非同期データ取得が簡潔に実装でき、エラー処理も組み込み済みです。
再利用可能なコード
モジュール化されたスライスは、他のプロジェクトにも簡単に移植できます。

まとめ

大規模プロジェクトでは、Redux Toolkitを活用することで、状態管理の複雑さを抑えつつ、拡張性と効率性を両立できます。次章では、createSliceとRTK Queryの連携について詳しく解説します。

createSliceとRTK Queryの連携

RTK Queryは、Redux Toolkitに組み込まれたデータフェッチとキャッシュ管理のための強力なライブラリです。これをcreateSliceと組み合わせることで、APIリクエストと状態管理を効率的に行うことができます。本章では、RTK Queryを用いたデータフェッチの実装方法を解説します。

RTK Queryの基本設定

RTK Queryは、createApi関数を使用してAPIスライスを定義します。

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const apiSlice = createApi({
  reducerPath: 'api', // スライス名
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.example.com' }), // ベースURL
  endpoints: (builder) => ({
    getProducts: builder.query({
      query: () => '/products', // エンドポイント指定
    }),
    getProductById: builder.query({
      query: (id) => `/products/${id}`,
    }),
  }),
});

export const { useGetProductsQuery, useGetProductByIdQuery } = apiSlice;

主要構成要素

reducerPath: ストア内のスライス名を指定します。
baseQuery: APIリクエストを実行するためのベースクエリ（通常はfetchBaseQueryを使用）。
endpoints: APIのエンドポイントを定義します。queryやmutationで操作を記述します。
hooks: 自動生成されたフック（例: useGetProductsQuery）を使用してReactコンポーネント内でデータを取得します。

Reduxストアへの統合

APIスライスをReduxストアに追加します。

import { configureStore } from '@reduxjs/toolkit';
import { apiSlice } from './apiSlice';

const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
});

export default store;

Reactコンポーネントでのデータフェッチ

生成されたフックを使用して、データをフェッチします。

// ProductList.js
import React from 'react';
import { useGetProductsQuery } from './apiSlice';

const ProductList = () => {
  const { data: products, error, isLoading } = useGetProductsQuery();

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
};

export default ProductList;

RTK QueryとcreateSliceの併用

createSliceを使用して、APIから取得したデータを別の状態と連携させることができます。以下の例では、選択された商品のIDをcreateSliceで管理します。

// selectedProductSlice.js
import { createSlice } from '@reduxjs/toolkit';

const selectedProductSlice = createSlice({
  name: 'selectedProduct',
  initialState: null,
  reducers: {
    selectProduct: (state, action) => action.payload,
    clearSelection: () => null,
  },
});

export const { selectProduct, clearSelection } = selectedProductSlice.actions;
export default selectedProductSlice.reducer;

Reactコンポーネントでの利用例:

// ProductDetail.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useGetProductByIdQuery } from './apiSlice';
import { selectProduct, clearSelection } from './selectedProductSlice';

const ProductDetail = () => {
  const dispatch = useDispatch();
  const selectedProductId = useSelector((state) => state.selectedProduct);
  const { data: product, isLoading } = useGetProductByIdQuery(selectedProductId, {
    skip: !selectedProductId, // 選択されていない場合はリクエストをスキップ
  });

  if (isLoading) return <p>Loading...</p>;
  if (!product) return <p>No product selected.</p>;

  return (
    <div>
      <h1>{product.name}</h1>
      <button onClick={() => dispatch(clearSelection())}>Back</button>
    </div>
  );
};

export default ProductDetail;

createSliceとRTK Queryの連携の利点

APIデータとローカル状態の統合
RTK Queryで取得したデータをcreateSliceで管理する状態と連携させることで、機能を拡張できます。
効率的なデータキャッシュ
RTK Queryはデータをキャッシュし、不要な再リクエストを防ぎます。これにより、パフォーマンスが向上します。
簡潔なコード
自動生成されたフックを利用することで、APIリクエストの実装がシンプルになります。

RTK Queryを組み合わせることで、データフェッチと状態管理を一元化し、開発効率を大幅に向上させることが可能です。次章では、状態管理におけるベストプラクティスを解説します。

状態管理のベストプラクティス

Reactアプリケーションにおける状態管理を効率的かつスケーラブルにするには、いくつかのベストプラクティスを意識することが重要です。ここでは、Redux Toolkitを活用した状態管理における最適なアプローチを解説します。

1. 状態の種類を区別する

状態を以下の2種類に分類し、それぞれ適切に管理することが重要です。

1.1 グローバル状態

アプリケーション全体で共有される必要があるデータ（例: ユーザー認証情報、アプリ全体の設定）。これらは、Redux ToolkitやRTK Queryを利用して管理します。

1.2 ローカル状態

特定のコンポーネントやページでのみ使用されるデータ（例: モーダルの開閉状態、フォーム入力値）。これらはReactのuseStateやuseReducerを使用して管理するのが適切です。

2. スライスの分離とモジュール化

Redux ToolkitのcreateSliceを使用して、機能やドメインごとに状態を分離します。例えば、以下のようにスライスを分けると、責任範囲が明確になります。

userSlice: ユーザー情報や認証状態
productSlice: 商品データや在庫情報
cartSlice: ショッピングカートの内容

スライスを分けることで、コードが整理され、チームでの開発やメンテナンスが容易になります。

3. 非同期処理の効率化

非同期処理には、以下の点を注意してください。

3.1 createAsyncThunkの活用

非同期処理をcreateAsyncThunkで統一すると、エラーハンドリングや状態トラッキングが簡単になります。

3.2 RTK Queryの導入

データフェッチが頻繁に行われる場合は、RTK Queryを活用してキャッシュやリクエストの管理を効率化します。

4. 状態の不変性とImmerの活用

Redux Toolkitは内部でImmerを使用しており、状態を直接変更するように記述してもイミュータブルに処理されます。この仕組みを活用することで、シンプルで直感的なコードを記述できます。

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; }, // イミュータブルに処理される
  },
});

5. 過剰な状態管理を避ける

すべてのデータをReduxで管理するのは避けるべきです。以下の基準を参考に状態を管理します。

頻繁にコンポーネント間で共有される: Reduxで管理
一時的な状態である: useStateで管理

6. Redux DevToolsの活用

Redux DevToolsを利用することで、状態やアクションの追跡が容易になります。特に、大規模アプリケーションではデバッグ効率が大幅に向上します。

const store = configureStore({
  reducer: {
    user: userReducer,
    products: productReducer,
  },
  devTools: process.env.NODE_ENV !== 'production',
});

7. 型安全性の確保（TypeScriptの導入）

Redux ToolkitはTypeScriptと相性が良いため、型安全な状態管理が可能です。特に、大規模なプロジェクトでは、型定義がエラーを防ぎ、開発効率を向上させます。

interface CounterState {
  value: number;
}

const initialState: CounterState = { value: 0 };

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => { state.value += 1; },
  },
});

8. コードの一貫性を保つ

状態管理に関するコーディング規約をチームで統一することが重要です。Redux Toolkitの利用により、アクションとリデューサーの一貫した構造が保たれます。

まとめ

効率的な状態管理を実現するためには、状態の適切な分類、スライスの分離、非同期処理の効率化、ツールの活用などが重要です。Redux Toolkitを活用しながら、これらのベストプラクティスを意識することで、スケーラブルでメンテナンス性の高いアプリケーションを構築できます。次章では、今回の内容を簡潔にまとめます。

まとめ

本記事では、Reactアプリケーションにおける状態管理の効率化を目指し、Redux ToolkitのcreateSliceを中心に解説しました。以下の主要なポイントを学びました。

1. Redux Toolkitの導入と利点

Redux Toolkitは、状態管理を簡素化し、ボイラープレートコードを削減するための強力なツールです。createSliceを使うことで、アクションとリデューサーを一箇所で管理し、状態管理の効率を大幅に向上させます。

2. 非同期処理の効率化

createAsyncThunkやRTK Queryを活用することで、非同期処理やAPIリクエストの管理が簡単になります。これにより、データ取得やエラーハンドリングが効率的に行えます。

3. 大規模プロジェクトでの状態管理

状態を機能ごとに分けてスライスとして管理することで、コードの可読性とメンテナンス性が向上します。さらに、createSliceとRTK Queryを組み合わせることで、APIデータのフェッチやキャッシュ管理が簡素化されます。

4. ベストプラクティスの実践

状態の管理方法、非同期処理の効率化、コードの一貫性の維持など、Redux Toolkitを使用した状態管理のベストプラクティスを実践することで、スケーラブルでメンテナンス性の高いアプリケーションを構築できます。

Redux ToolkitとcreateSliceは、状態管理を効率化し、React開発をよりシンプルにするための強力なツールです。今回学んだ内容を活用し、Reactアプリケーションの状態管理をより効果的に行いましょう。