Redux ツールキットの目的

redux が JavaScript アプリケーションにとって、特に React を使用する場合に強力な状態管理ライブラリであることはすでにわかっています。
ただし、redux をセットアップするためのコードが重いため、redux を使用するのは困難です。そのため、保守とデバッグが困難になります。そこで Redux Toolkit が役に立ちます。
Redux ツールキットが解決する問題

• ストアの設定が複雑すぎます。
• redux で動作するための多くのパッケージ (ミドルウェア、ツールなど) を追加します。
• Redux のセットアップに必要なコードが多すぎます

Redux ツールキットは、redux ロジックを記述するための公式かつ推奨される方法です。これは、開発を簡素化し、ボイラープレート コードを削減して、スケーラビリティと保守性の高いアプリケーションを作成するためのツール セットを提供します。

Redux Toolkit の主な利点:

1. 定型コードの削減: アクション クリエーターと定数の必要性を排除します。
2. 簡素化されたストア設定: 適切なデフォルトでストアを構成する単一の API を提供します。
3. 不変性と DevTools の組み込みサポート: Redux DevTools を自動的に有効にし、不変性のために Immer と統合します。
4. TypeScript サポートの向上: より適切な型付けを提供し、TypeScript と適切に統合します。

redux ツールキットは任意の JavaScript ライブラリで使用できるため、react で redux ツールキットをセットアップします。

React アプリケーションでの Redux ツールキットのセットアップ

ステップ 1: 新しい React プロジェクトを作成する

まず、新しい React アプリケーションを作成しましょう。この目的には、create-react-app または Vite を使用できます。簡単にするために、ここでは create-react-app を使用します。

npx create-react-app redux-toolkit-example
cd redux-toolkit-example

ステップ 2: Redux Toolkit と React-Redux をインストールする

次に、必要なパッケージをインストールします: @reduxjs/toolkit と React-redux。

npm install @reduxjs/toolkit react-redux

1. スライスとリデューサについて

スライスは、アプリケーションの特定の機能に対する Redux リデューサー ロジックとアクションのコレクションです。 Redux Toolkit は、最小限の定型文で状態のスライスを作成するのに役立つ createSlice 関数を提供します。

ステップ 1: スライスを作成する
簡単なカウンタースライスを作成してみましょう。 features/counter ディレクトリ内に counterSlice.js という名前の新しいファイルを作成します:

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

const initialState = {
  value: 0,
};

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

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

ここでは、初期状態と 3 つのレデューサー (インクリメント、デクリメント、および IncrementByAmount) を持つ counter という名前のスライスを定義します。 createSlice 関数は、各リデューサー関数のアクション クリエーターを自動的に生成します。

1. Redux ストアの構成

スライスができたので、Redux ストアを構成しましょう。 Redux Toolkit は、適切なデフォルトでストアをセットアップする configureStore 関数を提供します。

ステップ 1: ストアを作成する
アプリディレクトリ内にstore.jsファイルを作成します:

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

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

export default store;

ステップ 2: アプリにストアを提供する
React アプリケーションをreact-redux のコンポーネントでラップし、ストアに渡します。 Index.js ファイルを更新します:

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

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

1. コンポーネントをストアに接続する

Redux ストアと対話するには、react-redux によって提供される useSelector フックと useDispatch フックを使用します。
ステップ 1: useSelector
を使用して状態にアクセスする useSelector フックを使用してストアから状態にアクセスする

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

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

  return (
    

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

export default Counter;

ステップ 2: アプリでカウンター コンポーネントを使用する
Counter コンポーネントをメインの App コンポーネントにインポートして使用します:

// src/App.js
import React from 'react';
import Counter from './features/counter/Counter';

function App() {
  return (
    

      
  );
}

export default App;

1. 結論と次のステップ

このパートでは、スライスの作成、ストアの構成、フックを使用したコンポーネントの Redux ストアへの接続など、React アプリケーションで Redux Toolkit をセットアップする基本について説明しました。次のパートでは、API からデータを取得し、さまざまな読み込み状態を管理するために、createAsyncThunk を使用して非同期ロジックを処理する方法についてさらに詳しく説明します。

パート 2: 高度な Redux ツールキット - createAsyncThunk を使用した非同期ロジックをお楽しみに!