在 React-Redux 中，connect 是一种高阶函数，用于连接 Redux store 和 React 组件。它可以帮助我们在组件中访问 Redux store 中的数据，并实现数据的监听和更新。
什么是高阶函数？
高阶函数是指接收一个函数作为参数，并返回一个新函数的函数。它们常常用于把多个函数组合在一起，增加代码的可重用性。
在 React 中，高阶组件与高阶函数是类似的概念，即接受一个组件作为参数，并返回一个新的组件。
connect 的基本用法
connect 的基本用法为将一个 React 组件包装成另一个组件，使其能够访问 store 中的数据。
下面是一个例子，假设我们有一个 Counter 组件，在其内部需要使用 Redux store 中的 count 变量：
-- -------------------- ---- ------- ------ - ------- - ---- -------------- ------ - ---------- --------- - ---- ------------ ----- ------- - -- ------ ---------- --------- -- -- - ------ - ----- ------------------- ------- ------------------------------- ------- ------------------------------- ------ - - ----- --------------- - ----- -- -- ------ ----------- -- ----- ------------------ - - ---------- --------- - ------ ------- ------------------------ -----------------------------展开代码
我们可以看到，通过 connect 函数，我们将 Counter 组件传入到函数中，并返回一个新的组件。这个新组件会连接 store，并将 mapStateToProps 和 mapDispatchToProps 中的数据和方法注入到 Counter 组件中。
mapStateToProps 和 mapDispatchToProps
connect 提供了两个参数：mapStateToProps 和 mapDispatchToProps。它们分别用于将 store 中的数据和方法映射到组件的 props 中。
mapStateToProps
mapStateToProps 接收一个 state 参数，表示当前的 Redux store 状态，我们需要返回一个对象，将需要的数据映射到组件的 props 中。
const mapStateToProps = state => ({ count: state.count })
在这个例子中，我们将 store 中的 count 变量映射到组件的 props 中。
mapDispatchToProps
mapDispatchToProps 可以接收两种参数。
如果传入一个函数，这个函数会接收一个 dispatch 函数作为参数，用于将 action 发送到 store 中。作为返回值，我们需要返回一个包含需要的方法的对象：
const mapDispatchToProps = dispatch => ({ increment: () => dispatch(increment()), decrement: () => dispatch(decrement()) })
在这个例子中，我们将 increment 和 decrement 方法映射到组件的 props 中，并在这些方法中通过 dispatch 发送对应的 action 到 store 中。
我们也可以直接返回一个包含 action 的对象，这样 mapDispatchToProps 会自动将每个 action 包装成一个 dispatch 函数：
const mapDispatchToProps = { increment, decrement }
在这个例子中，我们将 increment 和 decrement action 直接映射到组件的 props 中。这样在组件中使用这些方法时，它们会自动被包装成 dispatch 函数。
使用 ownProps
有时候我们需要在 mapStateToProps 或 mapDispatchToProps 中使用组件本身的 props，此时可以使用 ownProps 参数：
const mapStateToProps = (state, ownProps) => ({ count: state[ownProps.counterName] })
在这个例子中，ownProps 表示组件本身的 props，我们可以根据 ownProps 中的数据来动态地从 store 中获取数据。
总结
connect 是一个非常重要的函数，通过它我们可以把 Redux store 和 React 组件连接在一起，实现数据的监听和更新。在使用 connect 时，我们需要特别注意 mapStateToProps 和 mapDispatchToProps 参数，它们的返回值会被注入到组件的 props 中。除此之外，我们还可以使用 ownProps 参数来动态获取组件本身的 props，以便在 mapStateToProps 或 mapDispatchToProps 中做出相应的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6520f09d95b1f8cacd8617b4
