在 React 專案中，我們通常使用 Redux 來管理應用程式的全域狀態。在這種情況下，我們需要封裝 store、reducer 和 action 以實現優雅且高效的狀態管理。
以下是封裝 store、reducer 和 action 檔案的策略和建議：
-
建立資料夾結構：為了保持程式碼的可讀性和可維護性，請在專案中建立一個名為store (資料夾)的資料夾。在「store」資料夾內部，建立以下檔案和資料夾：
actions (資料夾)
reducers (資料夾)
index.js (檔案) -
編寫 actions：在 actions 資料夾中，為每個功能模組建立一個單獨的檔案。在這些檔案中，我們定義用於不同操作的 actions。
例如，如果我們有一個使用者模組，可以在 /actions 資料夾中建立一個名為 "user.js" 的檔案。
// actions/user.js
export const updateUser = (user) => ({
type: "UPDATE_USER",
payload: user
});
export const removeUser = () => ({
type: "REMOVE_USER"
});
- 編寫 reducers：在 reducers 資料夾中，為每個功能模組建立一個單獨的檔案。在這些檔案中，我們定義響應不同 actions 的 reducer。通過將功能模組分解為不同的檔案，我們可以更輕鬆地追蹤和維護它們。
例如，在 /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：在 reducers 資料夾中，建立一個名為 "index.js" 的檔案，然後 import 所有的 reducers 並使用 combineReducers 方法將它們組合成一個主 reducer。
// reducers/index.js
import { combineReducers } from "redux";
import { userReducer } from "./user";
export default combineReducers({
user: userReducer,
// 如果有其他reducers，可以在這裡添加
});
- 配置 store：在 store 資料夾中的 "index.js" 檔案裡，我們配置和匯出我們的 store。在這裡，我們 import 主 reducer 並使用 createStore 方法建立 store。
// store/index.js
import { createStore } from "redux";
import rootReducer from "./reducers";
const store = createStore(rootReducer);
export default store;
- 在頂級元件（通常是 index.js 或 app.js）使用 Provider 將 store 傳遞到 React 元件樹：
// index.js or 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")
);
現在，我們已經完成了 store、reducer 和 action 的封裝。你可以根據專案的需求適當調整和擴展它們。