ReduxストアからIDを選択する方法

Reduxストアの設定: Reduxストアを設定するために、createStore関数を使用して新しいストアを作成します。また、アプリケーションの状態やアクションに応じて適切なリデューサーを設定する必要があります。

import { createStore } from 'redux';
import rootReducer from './reducers'; // ルートリデューサーをインポートする
const store = createStore(rootReducer);

アクションの作成: IDを選択するためのアクションを作成します。アクションは、ストア内の状態を変更するためのオブジェクトです。

// アクションのタイプを定義する
const SELECT_ID = 'SELECT_ID';
// アクションクリエーターを定義する
export const selectId = (id) => {
  return {
    type: SELECT_ID,
    payload: id
  };
};

リデューサーの作成: リデューサーは、アクションに基づいて新しい状態を返す関数です。選択したIDをReduxストアに格納するために、新しいケースをリデューサーに追加します。

// 初期状態を定義する
const initialState = {
  selectedId: null
};
// リデューサーを作成する
const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case SELECT_ID:
      return {
        ...state,
        selectedId: action.payload
      };
    default:
      return state;
  }
};
export default rootReducer;

コンポーネントでの使用: コンポーネント内でReduxストアの状態を使用するために、useSelectorフックを使用します。

import { useSelector } from 'react-redux';
const MyComponent = () => {
  const selectedId = useSelector(state => state.selectedId);
  // 選択したIDを使用するコードを追加する
  return (
    // コンポーネントの JSX を返す
  );
};

これで、ReduxストアからIDを選択する準備が整いました。必要に応じて、アクションをディスパッチしてIDを選択し、コンポーネント内で選択したIDを使用できます。

以上がReduxストアからIDを選択する方法の基本的な手順です。必要に応じて、アプリケーションに合わせてカスタマイズしてください。