完全な Redux ツールキット (パート-1)

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 つのレデューサー (increment、decrement、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(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  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 (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
};

export default Counter;

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

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

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

export default App;

1. 結論と次のステップ

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

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

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