连接到组件外部的 redux 存储 - Javascript

Redux 是一个流行的状态管理库，它提供了将应用程序的状态存储在单个地方的能力，并允许 React 组件轻松访问和更新状态的方式。

在本文中，我们将介绍如何将 Redux 存储连接到组件以及如何从组件中访问状态。

实现方式

要连接到 Redux 存储，您需要使用 React-Redux 库中的 connect 函数。connect 接受两个参数，第一个参数是一个函数，称为 mapStateToProps，它将定义组件如何从 Redux 存储中检索状态。第二个参数是一个对象，称为 mapDispatchToProps，它将定义组件如何向 Redux 存储发送操作。

下面是一个简单的示例，其中 Counter 组件从 Redux 存储中获取当前计数，并在单击按钮时将增加计数器：

import React from 'react'
import { connect } from 'react-redux'

const Counter = ({ count, increment }) => (
  <div>
    <span>{count}</span>
    <button onClick={increment}>Increment</button>
  </div>
)

const mapStateToProps = state => ({
  count: state.count
})

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' })
})

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

在此示例中，我们定义了 mapStateToProps 函数，用于从 Redux 存储中检索当前 count。我们还定义了 mapDispatchToProps 函数，用于向 Redux 存储发送 INCREMENT 操作。

这两个函数都将传递给 connect 函数，该函数将返回一个高阶组件，该组件将包装原始组件并通过属性传递状态和操作。

结论

使用 Redux 可以很好地将状态集中管理，并使组件更易于维护。使用 connect 函数，您可以将组件连接到 Redux 存储，并轻松地从组件中访问和更新状态。

上述代码的执行效果如下：