如何将 Redux 存储和操作连接到 React 组件

Question

我对 ReactJS 有一些经验，但现在我正在尝试开始使用 Redux，但遇到了几个问题。我已经知道如何创建动作、常量、reducers，如何将它们连接到一个单独的商店，但我现在实际上不知道如何将它与 React 一起使用。例如，我有一个表单来收集用户的数据，我希望它全部传递给 Redux 存储。所以我想主要问题是如何在 ReactJS 中触发动作？

Answer 1

使用react-redux 时，您将获得一个名为connect 的组件增强器。

class Component extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClickButton}>
        {this.props.a}
      </button>
    )
  }
}

export default connect(function mapStateToProps(state) { 
  return { a: state.store.a } 
}, { onClickButton: incrementAction })(Component)

我在这里所做的是获取全局存储值（state.store.a - state 是全局存储，.store 是来自组合存储的存储，a 是值），并告诉React 组件来监听这个变量的变化（通过connect 透明地）。

另外，我包装了一个动作创建者incrementAction（并将其重命名为onClickButton）。如果您使用像redux-thunk 这样的中间件，这将自动将store.dispatch 作为参数传入。否则，这是一个标准动作创建者。

这两个都将作为道具在组件内部可用（参数描述性地命名为mapStateToProps 和mapDispatchToProps）

Answer 2

您需要使用react-redux。例如，这是一个小计数器：

import { connect } from "react-redux";
import { increment } from "actions";
import PropTypes from "prop-types";
import React from "react";

function counter ({ count, increment }) {
  return <button onClick={increment}>
    {count}
  </button>;
}

counter.propTypes = {
  count: PropTypes.number.isRequired,
  increment: PropTypes.func.isRequired
};

export default connect(
  (state) => ({
    count: state.data.count
  }),
  { increment }
)(counter);

(state) => ({ }) 位将一个名为 count 的属性传递给组件的 props。 { increment } 在道具中传递您的 increment 函数。

确保在connect 中包含{ increment } 部分；如果你不这样做，你的 redux 操作将不会被调度。

Answer 3

要绑定 redux 以做出反应，有一个名为 react-redux 的包。其中的描述是 redux 的官方 react 绑定。​​

您可以使用mapDispatchToProps 连接动作以做出反应，这会将您的动作映射为道具。然后你可以将这些动作称为道具。当你将这些动作调用为 props 时，这些动作将被触发并且 redux 状态将发生变化。

要访问状态，您必须使用mapStateToProps，它会将状态作为道具提供给您。

您可以使用connect方法连接mapStateToProps和mapDispatchToProps进行反应。

我认为如果你做一个教程会更容易。 This 是 Redux 的创建者 Dan Abramov 的教程。