Redux Toolkit は、Redux ロジックを記述するための公式で推奨される方法です。すぐに使えるストア設定の適切なデフォルトが提供され、最も一般的に使用される Redux アドオンが組み込まれています。このブログでは、Redux Toolkit と React アプリケーションの統合の基本を説明します。

Redux ツールキットとは何ですか?

Redux Toolkit は、Redux ロジックの作成プロセスを簡素化するのに役立つツールのセットです。これには、ストアのセットアップ、リデューサーの作成、不変の更新ロジックの作成などの一般的なユースケースを簡素化するユーティリティが含まれています。

React を使用した Redux ツールキットのセットアップ

React アプリケーションで Redux Toolkit をセットアップする手順を見てみましょう。

ステップ 1: 依存関係をインストールする

まず、必要なパッケージをインストールする必要があります。これは、npm または Yarn を使用して行うことができます。

npm install @reduxjs/toolkit react-redux

ステップ 2: Redux ストアを作成する

ストアは、Redux に命を吹き込むオブジェクトです。 Redux Toolkit では、configureStore 関数を使用してストアを作成できます。

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

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

export default store;

ステップ 3: スライスを作成する

スライスは、アプリの 1 つの機能に対する Redux リデューサー ロジックとアクションのコレクションです。 Redux Toolkit の createSlice 関数は、アクション クリエーターとアクション タイプを自動的に生成します。

// src/features/counter/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;
    },
  },
});

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

export default counterSlice.reducer;

ステップ 4: React アプリケーションにストアを提供する

React コンポーネントで Redux ストアを利用できるようにするには、react-redux のプロバイダー コンポーネントを使用する必要があります。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

ステップ 5: React コンポーネントを Redux ストアに接続する

React コンポーネントを Redux ストアに接続するには、react-redux の useSelector フックと useDispatch フックを使用できます。

// src/components/Counter.jsx
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../features/counter/counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    

      
{count}
       dispatch(increment())}>Increment
       dispatch(decrement())}>Decrement
    
  );
}

export default Counter;

ステップ 6: アプリで接続コンポーネントを使用する

最後に、アプリケーションで接続コンポーネントを使用できるようになります。

// src/App.js
import Counter from './components/Counter';

function App() {
  return (
    

      
    
  );
}

export default App;

結論

これらの手順に従うことで、React アプリケーションに Redux Toolkit を設定して、予測可能で保守可能な方法で状態を管理できます。 Redux Toolkit は、Redux を使用する際の一般的なタスクの多くを簡素化し、Redux ロジックの作成と保守を容易にします。

さらなる探求

Redux Toolkit と React についてさらに詳しく知りたい方のために、貴重なリソースをいくつか紹介します:

• Redux Toolkit Documentation: 公式ドキュメントには、包括的なガイドと API リファレンスが提供されています。
  • Redux ツールキットのドキュメント
• React Redux ドキュメント: React で Redux を使用する方法について詳しく説明します。
  • React Redux ドキュメント
• Redux Essentials チュートリアル: Redux Toolkit を使い始めて実行するためのステップバイステップのチュートリアル。
  • Redux 基本チュートリアル
• Redux の基礎チュートリアル: Redux の核となる概念をカバーする詳細なチュートリアル。
  • Redux の基礎チュートリアル

読んでいただきありがとうございます!
PO.