React 状态管理面试题, 在 React 项目中如何使用 Redux?项目结构如何划分?
React 状态管理面试题, 在 React 项目中如何使用 Redux?项目结构如何划分?
QA
Step 1
Q:: 在 React 项目中如何使用 Redux？
A:: 在 React 项目中使用 Redux 需要进行以下步骤：
1. 安装 Redux 及其相关库：首先通过 npm 或 yarn 安装 redux、react-redux。
2. 创建 Redux Store：编写一个 store.js 文件，使用 createStore 方法创建 Store，通常你还会使用 combineReducers 来组合多个 reducer，并通过 applyMiddleware 来添加中间件，如 Redux Thunk。
3. 定义 Reducer：在 reducers 目录下创建 reducer 函数，用于描述 state 的变化。
4. 定义 Actions：在 actions 目录下创建 action 创建函数，通常会定义一些常量来表示 action 的类型，并在 action 创建函数中返回相应的 action 对象。
5. 在组件中连接 Redux：使用 react-redux 提供的 Provider 组件将 Store 注入到根组件中，并在需要使用 state 或 dispatch 的地方使用 connect 高阶组件或 useSelector 和 useDispatch 钩子函数来连接 Redux。
6. 使用 Redux DevTools：开发过程中可以使用 Redux DevTools 来调试应用的状态变化。
Step 2
Q:: 项目结构如何划分？
A:: 通常在使用 Redux 的 React 项目中，推荐的项目结构如下：
1. src/ 目录：放置所有源代码。
2. src/components/ 目录：放置无状态（或简单状态）的展示组件。
3. src/containers/ 目录：放置与 Redux 连接的容器组件。
4. src/actions/ 目录：放置所有 Redux action 创建函数。
5. src/reducers/ 目录：放置所有 reducer 函数，通常会有一个 index.js 文件用于合并所有 reducer。
6. src/store/ 目录：放置 Redux Store 相关的配置文件，如 store.js。
7. src/middlewares/ 目录：如果有自定义的中间件，可以放在此目录下。
8. src/constants/ 目录：放置一些常量定义，通常是 action 的类型。
9. src/utils/ 目录：放置一些辅助工具函数。