Redux 中 connect 的使用详解
Redux 是一款流行的状态管理库，它可以让我们更加轻松、高效地管理前端应用的状态。在 Redux 中，connect 是一个非常重要的概念，它可以让我们将组件连接到 Redux 的 store 上，使得组件可以访问到 store 中的状态数据。本文将详细介绍 connect 的使用方法和注意事项，帮助读者更好地理解和掌握 Redux 的使用。
连接组件和 store
将组件和 store 连接起来的方式是使用 connect 函数。这个函数接收两个参数：mapStateToProps 和 mapDispatchToProps。这两个参数分别用于指定组件需要从 state 中获取哪些数据和需要 dispatch 哪些 action。我们先来看一下 mapStateToProps 参数的用法。
使用 mapStateToProps
mapStateToProps 接收一个函数作为参数，这个函数会接收整个 Redux 的 state，并将需要的 state 数据作为 props 传递给组件。比如，我们有一个名为 Counter 的组件，它需要从 Redux 中获取一个名为 count 的状态值，代码如下：
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- ------- - -- ----- -- -- -
-----
------ -------
------
--
----- --------------- - ----- -- --
------ ------------
---
------ ------- ----------------------------------在这个组件中，我们使用了 ES6 中的解构赋值语法，将 count 作为 props 传递给了组件。而 mapStateToProps 函数则指定了需要从 Redux 的 state 中获取的 count 值。这样一来，当 Redux 的 count 值发生改变时，Counter 组件也会自动更新，并重新渲染页面。
需要注意的是，mapStateToProps 函数应该返回一个对象，这个对象包含的所有 state 数据都会作为 props 传递给组件。另外，如果我们只需要获取部分 state 数据，可以使用 ES6 中的解构语法，比如：
const mapStateToProps = ({ count }) => ({ count });这样我们就只会从 state 中获取 count 数据。
使用 mapDispatchToProps
除了使用 mapStateToProps，我们还可以使用 mapDispatchToProps 函数来将 dispatch 函数作为 props 传递给组件。这样，组件就可以直接调用 dispatch 函数来触发 action，从而更新 Redux 的 state。比如，我们有一个名为 Increment 的组件，它可以点击按钮来触发一个 increment action，代码如下：
-- -------------------- ---- ------- ------ - ------- - ---- -------------- ------ - --------- - ---- ------------ ----- --------- - -- --------- -- -- - ------- -------------------------------------- -- ----- ------------------ - - --------- -- ------ ------- ------------- -------------------------------
在这个组件中，我们使用了 onClick 事件来触发 increment 函数。而 mapDispatchToProps 则使用了一个对象来指定 increment 函数，这样我们就可以将这个函数作为 props 传递给组件。需要注意的是，这个对象的键名必须是一个 action creator 函数，而值则是一个函数，用于调用 dispatch 函数来触发 action。
同时使用 mapStateToProps 和 mapDispatchToProps
在实际项目中，我们通常需要同时使用 mapStateToProps 和 mapDispatchToProps 来将 state 和 action 传递给组件。这时，我们可以使用 connect 函数的第二个参数，即 mapDispatchToProps 函数。这个函数可以接收两个参数：dispatch 和 ownProps。其中，dispatch 是 Redux 的 dispatch 函数，而 ownProps 是组件自身的 props。下面是一个同时使用 mapStateToProps 和 mapDispatchToProps 的示例代码：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- ------------
----- ------- - -- ------ ---------- --------- -- -- -
-----
------- ------------------------------
--------------------
------- ------------------------------
------
--
----- --------------- - -- ----- -- -- -- ----- ---
----- ------------------ - - ---------- --------- --
------ ------- ------------------------ -----------------------------在这个组件中，我们使用了 increment 和 decrement 两个 action creator 函数，并将它们同时传递给 mapDispatchToProps 函数。这样，我们就可以通过 props 直接调用这两个函数来触发 action，从而更新 count 值。
总结
通过上面的介绍，我们可以看出，connect 是 Redux 中非常重要的一个概念。它可以将组件连接到 Redux 的 store 上，使得组件可以访问到 store 中的状态数据。同时，connect 还可以通过 mapStateToProps 和 mapDispatchToProps 函数来指定组件需要访问的 state 数据和 dispatch 函数，从而实现更加灵活和高效的状态管理。希望本文对读者能够有所帮助，更好地理解和掌握 Redux 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65af480fadd4f0e0ff8b03c6