中级 Redux 与 Redux Toolkit

熟悉 Redux Toolkit，以提高状态管理的效率并减少样板代码。

深入理解构建 Redux Toolkit 应用的核心，从 store 配置到状态切片的创建。

动手实践将应用重构为 Redux Toolkit，提升开发效率。

运用你的技能，使用 Redux Toolkit 构建一个 Twitter 搜索应用，深入掌握异步状态管理的核心要点。

在 Redux 应用中实现高效的数据获取与测试，可遵循以下步骤： 1. 定义数据获取动作（Actions） 创建用于触发数据请求的 action 类型和 action 创建函数。例如：`FETCH_DATA_REQUEST`、`FETCH_DATA_SUCCESS`、`FETCH_DATA_FAILURE`。 2. 编写异步动作创建函数（Async Action Creators） 使用中间件（如 Redux Thunk 或 Redux Toolkit）处理异步操作。通过 action 创建函数发起 API 请求，并根据结果分发成功或失败的 action。 3. 管理应用状态（State） 在 Redux store 中定义对应的状态结构，用于存储加载状态、数据内容及错误信息。例如：`{ loading: boolean, data: any, error: string | null }`。 4. 使用 Redux Toolkit 简化开发 采用 Redux Toolkit 提供的 `createAsyncThunk` 和 `createSlice`，自动处理异步流程，减少样板代码，提高可维护性。 5. 实现数据获取逻辑 在组件中调用 dispatch 触发异步 action，从 API 获取数据，并更新状态。确保在加载期间显示加载指示器，出错时展示错误信息。 6. 编写单元测试 对 action 创建函数和 reducer 进行单元测试，验证其在不同场景下的行为是否正确。使用 Jest 和 @testing-library/react 等工具模拟异步调用和状态变化。 7. 测试异步流程 使用 mock API（如 jest.mock）拦截实际网络请求，模拟成功或失败响应，确保异步逻辑按预期执行。 8. 集成测试组件行为 使用 React Testing Library 测试组件在数据加载过程中的渲染表现，包括初始加载、数据返回和错误处理。 9. 持续优化与监控 添加日志记录或性能监控，跟踪数据获取的延迟与成功率，及时发现并修复问题。 通过以上步骤，可以构建稳定、可测试且易于维护的 Redux 数据获取机制。

研究安装 Redux Toolkit、按文件夹划分功能模块的模式、Redux Devtools、Chakra UI 以及 Twitter 开发者访问权限。