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 メソッドを使用してそれらを 1 つのメインリデューサーに結合します。
// 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")
);
これで、ストア、リデューサー、アクションのカプセル化が完了しました。プロジェクトの要件に応じて、適宜調整や拡張を行うことができます。