react 如何使用 store

在 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 的封装。你可以根据项目的需求适当调整和扩展它们。