Redux 入门教程（三）：React-Redux 的用法
最新回答
-失败是成功他爹％
2026-10-22 11:32:05
在React-Redux中，组件被分为两大类：UI组件和容器组件。UI组件专注于界面呈现，而容器组件则负责状态管理与逻辑处理。UI组件不需要包含状态，通常被称为“纯组件”，其值完全由传入的参数决定。
容器组件则相反，它们负责管理数据和执行业务逻辑。通常，一个组件会包含UI与业务逻辑，这时，将其拆分为容器组件和UI组件，容器组件负责外部通信，将数据传给UI组件，由UI组件呈现视图。
React-Redux通过`connect()`方法将UI组件与容器组件连接起来。在使用`connect()`时，通常需要提供`mapStateToProps`和`mapDispatchToProps`两个函数。`mapStateToProps`用于将状态映射到UI组件的属性，而`mapDispatchToProps`则用于将用户对UI组件的操作映射成Action。
`mapStateToProps`函数需要将状态对象映射到UI组件的属性对象，返回的对象包含了与UI组件交互的属性。例如，可以返回一个todos属性，用于获取可显示的todos列表。`mapDispatchToProps`则定义了哪些UI组件的操作应该作为Action传给Store。
当使用`connect()`生成容器组件后，需要让容器组件获取到状态对象，这可以通过将状态对象作为参数传递，或者通过使用React-Redux提供的`Provider`组件来实现。`Provider`组件允许容器组件从上下文中获取到Store对象，使得子组件都能够访问到状态。
本文以计数器组件为例，展示了如何使用React-Redux整合Redux。计数器组件作为UI组件，需要从状态中获取值，并通过事件触发Action。接着，定义了状态与计数器组件参数之间的映射关系，以及事件与Action的映射关系。使用`connect()`方法生成容器组件，并定义了相应的Reducer。最后，创建Store对象并使用`Provider`组件包裹根组件。
此外，对于使用React-Router的项目，整合React-Redux与React-Router的流程与常规项目类似，主要是在Router组件外包裹`Provider`组件，确保所有组件都能访问到Store。
总之，React-Redux通过简化状态管理与组件交互，使得在React项目中整合Redux变得更加直观与高效。通过正确使用`connect()`、`Provider`以及管理状态与组件之间的关系，开发者可以更专注于构建可维护与可扩展的React应用。
热门标签
