Question

我对ReactJS有一些经验，但现在我正在尝试开始使用Redux，我遇到了几个问题。我已经知道如何创建动作，consts，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是来自合并商店的商店，{{1} }是值），并告诉React组件监听这个变量的变化（透明地通过a）。

此外，我正在包装一个动作创建者connect（并将其重命名为incrementAction）。如果您使用的是onClickButton这样的中间件，则会自动传入redux-thunk作为arg。否则，这是一个标准的动作创建者。

这两个组件都可以作为道具在组件内部使用（args的描述名称为store.dispatch和mapStateToProps）

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函数。

请务必在{ increment }中加入connect部分;如果不这样做，您的redux行动将不会被发送。

Answer 3

要绑定redux以进行反应，有一个名为react-redux的包。其描述是对redux的官方反应绑定。

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

要访问状态，您必须使用mapStateToProps，这将为您提供道具状态。

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

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

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

3 个答案: