Javascript 如何连接Redux'；s存储和反应操作'；s组件

我有一些使用ReactJS的经验，但现在我正试图开始使用Redux，我遇到了几个问题。我已经知道如何创建动作、常量、减缩器，如何将它们连接到单个存储，但现在我不知道如何将其用于React。例如，我有一个表单来收集用户的数据，我希望它全部传递给Redux存储。因此，我想主要的问题是如何在ReactJS中触发操作？

要将redux绑定到react，有一个名为。其描述是redux的官方react绑定

您可以使用

mapDispatchToProps

，将您的动作映射为道具，从而将动作连接到反应。然后你可以把这些动作称为道具。当您将这些动作称为道具时，这些动作将被触发，并且redux状态将更改

要访问该状态，您必须使用

MapStateTops

，这将为您提供作为道具的状态

您可以使用

connect

方法连接

MapStateTrops

和

mapDispatchToProps

进行反应

我想如果你做一个辅导会更容易。这是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);

从“react redux”导入{connect}；
从“操作”导入{increment}；
从“道具类型”导入道具类型；
从“React”导入React；
函数计数器（{count，increment}）{
返回
{count}
;
}
counter.propTypes={
计数：需要PropTypes.number.isRequired，
增量：PropTypes.func.isRequired
};
导出默认连接(
（州）=>({
计数：state.data.count
}),
{increment}
)（柜台）；

（state）=>（{}）

位将名为

count

的属性传递给组件的props。

{increment}

在props中传递

increment

函数

---

确保在连接中包含

{increment}

部分；如果您不这样做，您的redux操作将不会被调度。

当使用

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)

类组件扩展React.Component{
render（）{
返回(
{this.props.a}
)
}
}
导出默认连接（函数MapStateTops（状态）{
返回{a:state.store.a}
}，{onClickButton:incrementAction}）（组件）

我在这里所做的是获取一个全局存储值（

state.store.a

-

state

是全局存储，

.store

是组合存储中的存储，

a

是值），并告诉React组件侦听此变量的更改（通过

连接
透明）

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

这两个参数在组件中都可以作为道具使用（参数的名称为
mapStateToProps
和
mapDispatchToProps
）
我知道这一点，并且已经安装了它，但如何触发操作？我已经检查了那个页面并浏览了教程，但我仍然无法管理它，我不是想编辑你的。我想我正在编辑我的答案D：我是stackoverflow的新用户，我可以关闭这个问题吗D接受一个对你有帮助的答案，它“关闭”了question@LiudasD您应该通过单击旁边的复选标记来接受最佳答案。就我个人而言，我建议Tyler's，因为它提供了更多关于正在发生的事情的细节。我错过的是连接部分，非常感谢你的简短回答：如果你需要问你，很可能不需要使用Redux。“这会给你带来比解决问题更多的问题。”佩特佩勒我不确定我是否同意。需要redux和不知道如何在React中使用redux并不是相互排斥的。@TastesLikeTurkey当然可以，但问题的提出方式表明没有必要使用redux。只有知道Redux可以解决哪些具体问题时，才应该使用Redux。“我需要使用一个国家管理框架”不是一个很公平的问题，也许这个问题在我看到它之前就被编辑过了？因为我认为我们无法根据他网站的一个页面判断他是否应该使用Redux。我只是不喜欢这个方向，所以最近似乎已经走了，从“这是你问的问题的答案”到“这就是为什么你不应该问你的问题。”@TastesLikeTurkey True，我也不喜欢这个方向，但主要是在实际的答案中。不过，我认为在评论中建议另一种方法是可以的。