React プロジェクトでは、通常、アプリケーションのグローバルな状態を管理するために Redux を使用します。この場合、ストア、リデューサー、アクションをカプセル化して、エレガントで効率的な状態管理を実現する必要があります。
以下は、ストア、リデューサー、アクションファイルをカプセル化するための戦略とアドバイスです：
-
フォルダ構造の作成：コードの可読性とメンテナンス性を確保するために、プロジェクト内に「store」という名前のフォルダを作成してください。この「store」フォルダ内に、以下のファイルとフォルダを作成します：
「actions」（フォルダ）
「reducers」（フォルダ）
「index.js」（ファイル） -
アクションの作成：「actions」フォルダ内で、各機能モジュールに対して個別のファイルを作成してください。これらのファイルでは、さまざまな操作に使用するアクションを定義します。
例えば、ユーザーモジュールがある場合、「actions」フォルダ内に「user.js」という名前のファイルを作成します。
// actions/user.js
export const updateUser = (user) => ({
type: "UPDATE_USER",
payload: user
});
export const removeUser = () => ({
type: "REMOVE_USER"
});
- リデューサーの作成：「reducers」フォルダ内で、各機能モジュールに対して個別のファイルを作成してください。これらのファイルでは、異なるアクションに応答するリデューサーを定義します。機能モジュールを異なるファイルに分割することで、追跡とメンテナンスが容易になります。
例えば、「reducers」フォルダ内に「user.js」という名前のファイルを作成します。
// reducers/user.js
const initialState = {
user: null
};
export const userReducer = (state = initialState, action) => {
switch (action.type) {
case "UPDATE_USER":
return { ...state, ...action.payload };
case "REMOVE_USER":
return { ...state, user: null };
default:
return state;
}
};
- リデューサーの結合：「reducers」フォルダ内で、「index.js」という名前のファイルを作成し、すべてのリデューサーをインポートし、combineReducers メソッドを使用してそれらを主なリデューサーに結合します。
// reducers/index.js
import { combineReducers } from "redux";
import { userReducer } from "./user";
export default combineReducers({
user: userReducer,
// 他のリデューサーがある場合は、ここに追加します
});
- ストアの設定：「store」フォルダ内の「index.js」ファイルで、ストアを設定してエクスポートします。ここでは、主なリデューサーをインポートし、createStore メソッドを使用してストアを作成します。
// store/index.js
import { createStore } from "redux";
import rootReducer from "./reducers";
const store = createStore(rootReducer);
export default store;
- トップレベルのコンポーネント（通常は index.js または app.js）で、Provider を使用してストアを React コンポーネントツリーに渡します：
// index.jsまたはapp.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
これで、ストア、リデューサー、アクションのカプセル化が完了しました。プロジェクトの要件に応じて、適宜調整や拡張を行うことができます。