如何使用bindActionCreators传值？
使用bindActionCreators传值是一种在React应用中管理状态和触发动作的常用方法。bindActionCreators是Redux库中提供的一个辅助函数，用于将action creators绑定到dispatch函数上，以便在组件中调用。
在使用bindActionCreators传值之前，需要先安装Redux库，并在应用中引入相关的依赖。
下面是使用bindActionCreators传值的步骤：
- 导入Redux相关依赖：
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { actionCreator } from './actions'; // 导入你的action creator- 创建action creator：
// actions.js
export const actionCreator = (value) => {
return {
type: 'ACTION_TYPE',
payload: value
};
};- 在组件中使用bindActionCreators传值：
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { actionCreator } from './actions';
class MyComponent extends React.Component {
componentDidMount() {
const { actions } = this.props;
actions.actionCreator('传递的值');
}
render() {
// 组件的渲染逻辑
}
}
const mapStateToProps = (state) => {
// mapStateToProps的逻辑
};
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators({ actionCreator }, dispatch)
};
};
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);在上述代码中，我们首先导入了bindActionCreators和connect函数。然后，创建了一个action creator用于创建一个action对象。在组件中，通过componentDidMount生命周期函数调用了传递的actionCreator，并传递了一个值。最后，使用connect函数将组件与Redux store连接起来，并通过mapDispatchToProps函数将actionCreator绑定到组件的props上。
这样，我们就可以在组件中通过this.props.actions来调用actionCreator，并将值传递给Redux store进行处理。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
我正在使用React / Redux编写简单的应用程序。我注意到函数mapStateToProps()被多次调用。这里的代码：
class Employees extends React.Component {
componentDidMount() {
this.props.fetchEmployees();
}
}
let mapStateToProps = function mapStateToProps(state) {
console.log("foo");
return {...};
};
let mapDispa
浏览 0提问于2018-11-13得票数 3
回答已采纳
2回答
我有一个可重用的组件，它有自己的操作和还原器，然后在另一个组件中使用。
组件AddToCart
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import Button from 'environment/atoms/button'
import * as AppIndexActionsCreators from 'environment/AppIndexActionsCreators'
const Add
浏览 4提问于2016-09-01得票数 0
回答已采纳
当我尝试使用bindActionCreators时，我无法调用调度函数
调度功能不工作：
@connect(state => ({oPurchaseDetails: state.cart.cartItems}), dispatch => bindActionCreators({updateItem}, dispatch))
如果我不使用bindActionCreators，updateItem函数就不能工作。
updateItem函数不工作：
@connect(state => ({oPurchaseDetails: state.cart.cartItems}), dispa
浏览 0提问于2016-11-09得票数 3
如果我显式地写出分派函数，我就能够得到一个输入来更新我的redux存储onChange。当我尝试使用bindActionCreators()时，它为什么停止工作？
不使用bindActionCreators (此操作)
@connect(
state => ({}),
dispatch => {
return {
onSearchChange: (term) => {
dispatch(search(term));
}
};
}
)
export default class SearchForm exten
浏览 2提问于2015-12-27得票数 2
回答已采纳
我在sharepoint中遇到了一个奇怪的jQuery问题。我的jQuery代码在网络应用程序中工作得很好，但是当我在网络部件上使用相同的代码时，就会产生问题。
这就是jQuery在网络部件中的问题。我在我的web部件上引用了外部JavaScript文件。
这是我在一个单独的JavaScript文件中的函数。
function CallJS() {
alert($("#txt1")); **// It returns the object**
alert($('#txt1').attr('value')); **// Alway
浏览 1提问于2011-09-29得票数 1
1回答
我刚开始学习mind类型，我需要一些帮助来理解我头脑中不清楚的两件事。
以为例，我想知道在没有类型定义的情况下，对类型的控制是如何工作的，在本例中是：？
如果我使用redux定义，当我尝试绑定异步操作创建者时，bindActionCreators的验证就会失败(我正在使用redux-thunk)。
在使用redux-thunk时，如何继续使用流和绑定异步操作创建者？
代码示例()：
import { bindActionCreators } from 'redux';
import type { Dispatch } from 'redux';
浏览 5提问于2016-11-15得票数 10
到目前为止，我一直在处理两种mapDispatchToProps：
其一：
function mapDispatchToProps(dispatch) {
return {
fetchgadata: bindActionCreators(fetchgadata, dispatch)
};
}
二：
const mapDispatchToProps = (dispatch) => {
return {
onTimeChange: (e) => {dispatch (onSetTimeRange(e.target.value));},
};
};
浏览 2提问于2016-09-10得票数 6
回答已采纳
我读过关于bindActionCreators的文章，我在这里编译了一个resumen：
import { addTodo,deleteTodo } from './actionCreators'
import { bindActionCreators } from 'redux'
function mapStateToProps(state) {
return { todos: state.todos }
}
function mapDispatchToProps(dispatch) {
re
浏览 0提问于2018-03-14得票数 0
回答已采纳
image.png
这个地方没传值，导致
image.png
中的getPosition报错，之前没有这个问题，突然之间就出现了，，
有了解的专家讲解一下么
浏览 227提问于2021-01-12
如果我们使用调度连接到操作，有两种方式：-
1. this.props.dispatch(requestEmployees());
2. const mapDispatchToProps = (dispatch) => ({
requestEmployees: () => dispatch(requestEmployees())
});
如果我们在bindActionCreators的帮助下做同样的事情，那么我们的代码将是：-
function matchDispatchToProps(dispatch) {
return b
浏览 1提问于2016-12-27得票数 25
回答已采纳
我正在看一个React Redux应用程序，并试图了解一切如何工作。
在其中一个组件中，我看到了以下代码行：
import { bindActionCreators } from "redux";
...
function mapDispatchToProps(dispatch) {
return bindActionCreators({ fetchPhotos }, dispatch);
}
export default connect(
null,
mapDispatchToProps
)(SearchBar);
如果我将上述代码更改为以下代码，则所有操作
浏览 0提问于2019-03-07得票数 2
回答已采纳
在js文件中 import { bindActionCreators } from "redux";
const mapDispatchToProps = dispatch => {
const MyActions = bindActionCreators(MyActions, dispatch);
return {
actions: {
method1: () => {
MyActions.myActionMethod();
},
} 现在我想测试一下调用method1是否会调度MyActions.my
浏览 25提问于2020-03-24得票数 2
回答已采纳
我发现这个处理音乐播放的库有以下公共变量。 void Function() onCompleted; 我想在曲目结束时更改按钮的图标，以便它返回到播放图标。 我尝试使用musicPlayer.OnCompleted(() { **stuff** });，但出现语法错误Too many positional arguments: 0 expected, but 1 found. 如何订阅该事件，或者如何检查是否调用了OnCompleted？ 我仍然是dart的新手，但不能理解这一点。我试着像Angular一样订阅，或者查找它是否有不同的语法，但我不知所措。
浏览 23提问于2019-05-31得票数 0
回答已采纳
我通过create-react-app test --template redux-typescript创建了我的项目，然后通过connect而不是hooks重写了/src/features/counter/Coun.tsx，然后vscode给出了这个错误。 import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { RootState,
浏览 21提问于2021-04-26得票数 0
我在操作目录中有一个文件，它是root.js。Root.js将编译内部的所有其他操作，并将其绑定到bindActionCreators
export const all = (store) => {
AUTH: bindActionCreators(AUTH.actions, store.dispatch),
....: .....
}
据我所知，bindActionCreators的目的是自动分派操作。如果是这样的话，那么如何从智能组件访问它呢？
我看到了调度(行动)之类的东西。但是现在我已经把它绑定到全球了，我想我不再需要指定调度了。我该怎么做，或者有什么地方是我误解
浏览 3提问于2017-09-14得票数 1
回答已采纳
我的ReactJS代码中出现了以下错误：
TypeError:无法读取未定义的属性“映射”
这是基于以下代码：
import React, { Component } from "react";
import { connect } from "react-redux";
import { ListGroup, ListGroupItem } from "reactstrap";
import { bindActionCreators } from "redux";
import * as categoryActions fr
浏览 4提问于2021-08-09得票数 1
回答已采纳
2回答
如何样式化react-本机导航折叠项的文本。我浏览了文档，但找不到正确的方法
这是我的AppContainer
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View, Text, Button, StyleSheet } from 'react-native';
import { bindActionCreators } from 'redux';
import { ActionCreators
浏览 2提问于2017-05-04得票数 7
回答已采纳
我试图使用容器中的getFormValues向道具添加表单值。但是，当我在派生组件中查找values属性时，将得到一个未定义的值。我错过了什么？
集装箱代码：
import {reduxForm, getFormValues} from 'redux-form';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '../actions/propertiesActions';
浏览 0提问于2016-10-05得票数 1
回答已采纳
我正在尝试创建一个端点，它可以调用：
...retailer/home
或
...retailer/home?uid=123123123
我使用下面的源代码来生成de call：
@GET("retailer/home")
fun retrieveHomeContent(@Query("uid") uid: String? = null): Single<HomeContentEntity>
但是当我测试这个的时候，结果是：
retailer/home?uid=
因此，我不知道如何在值为null时进行改装以忽略查询。有什么建议吗？
浏览 12提问于2020-02-18得票数 0
回答已采纳
3回答
我有来自不同包的动作，它们具有相同的名称，如下所示：
import { bindActionCreators } from 'redux';
import { setActiveLanguage } from 'react-localize-redux';
import * as actionCreators from '../actions/actionCreators';
import * as toggleActions from '../actions/toggleActions';
import {actions as
浏览 3提问于2017-12-05得票数 1
我的印象是，bindActionCreators的目的是将actionCreators包装在调度函数中，并给这些新函数一个名称(可以通过mapDispatchToProps和connect作为道具传递给组件)。
但是，我发现的一个教程似乎调用了调度函数( bindActionCreators )上的updatePerson，这似乎违反了bindActionCreators的全部要点。
操作/update_Person.js
import { UPDATE_PERSON } from './types';
export default function updatePe
浏览 2提问于2017-11-10得票数 2
1回答
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as CommonActions from 'common/actions/common.actions';
import Activity from './activity.component';
const mapStateToProps = ({ common }) => ({common});
const mapDispatchToPr
浏览 2提问于2019-07-09得票数 1
我正在处理一个dataframes (72)列表，我希望使用它作为插入符号的train的输入，但是在使用自定义函数时遇到了问题。我找到了一个潜在的答案，但它指的是tuneGrid而不是trainControl。我编写的两个函数都未能将指定的trainControl参数传递给train
fun.train.rf <- function(x) {
ctrl <- trainControl(method = "repeatedcv", repeats = 3)
train(index ~ ., data = x, method = "rf",
浏览 3提问于2014-09-30得票数 0
回答已采纳
现在官方给的代码是直接传图片或者连接；
但是因为业务需求需要接收别的地方传来的图片，为byte[]/binary；
请问是否可以实现，有代码可以参考一下吗？
试使用过CIBuffer进来传参，一直说sdk image failed ，不知道有没有同样问题的已经解决的。
浏览 296提问于2018-05-15
回答已采纳
bindParam()似乎不会对函数求值，然后将其返回值绑定到预准备语句的参数，如下所示
$stmt->bindParam('foo', bar());
那么，为了绕过这个问题，这样做是不是一种好的做法呢？
$stmt->bindParam('foo', eval(bar()));
或者有没有其他人可以推荐做的事情？谢谢!
浏览 1提问于2010-12-11得票数 0
回答已采纳
我正在使用react-router-redux。
我不知道如何创建演示来简单地描述这个问题。我在Github上推送所有代码。
a-href工作正常。@
现在，推送方法不起作用。
@
我编辑代码并在GitHub上更新它。
我导入hashHistory。
hashHistory.push('detail/'+id);工作得很好。
disPatchpush @它不工作。
在Home.js中
@connect(state => {
return {
list:state.home.list,
};
}, dispatch => {
return
浏览 3提问于2017-03-14得票数 2
在J计量器中，如果线程1中有JDBC请求，我无法将属性从线程1传递到线程2。如果没有JDBC请求，属性将从线程1传递到线程2。有任何具体的原因吗?我需要做任何更改吗？在这件事上请帮帮我。
浏览 1提问于2020-05-26得票数 0
我现在使用你们提供的PHP-SDK按照API文档开发，有报错问题，是否应该改变传入Version？
标题：公共参数 - 云服务器 - API文档 - 帮助与文档 - 腾讯云
地址：https://cloud.tencent.com/document/api/213/11650
浏览 442提问于2018-03-02
我需要使用javascript代码将一个html页面的值传递给另一个html javascript函数。如何传值。提前感谢
view.cshtml:
b.on('click', function () {
document.location.href = + '?Id=' + sData; // need to pass the value
});
index.cshtml:
function getId(data) { // i need to get the data here
}
浏览 3提问于2013-02-26得票数 0
我见过很多在mapDispatchToProps函数中使用bindActionCreators函数的示例，如下所示：
...
const mapDispatchToProps = (dispatch, props) => ({
actions: bindActionCreators({
doSomething: somethingActions.doSomething,
}, dispatch)
});
export default connect(null, mapDispatchToProps)(SomeComponent);
这意味着每次存储更改时
浏览 0提问于2018-07-20得票数 2
我有一个简单的自定义钩子，它返回一些函数：
const useCustom = () => {
const someReduxValue = useSelector(...);
const fn1 = useCallback(() => {
// do something with someReduxValue
}, [...]);
const fn2 = useCallback(() => {
// may include some complex operations like reducing/mapping etc
浏览 7提问于2021-12-27得票数 0
我正在尝试了解React和Redux是如何工作的，我正在研究来自的FuelSavingsPage.js。我知道actions在mapDispatchToProps中是从哪里来的，但我不明白state是如何传递给mapStateToProps的，或者dispatch是如何传递给mapDispatchToProps的。这是怎么发生的？
import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 're
浏览 8提问于2016-08-20得票数 5
回答已采纳
我对JavaScript和react非常陌生，我已经有了需要添加功能的现有项目。它使用redux和redux-thunk与redux-saga一起发送API请求。目前，它只支持每个组件一个dispatch函数，我需要对saga的几种类型的请求进行dispatch。我试图通过bindActionCreators将dispatch添加到商店中，但没有效果。我完全迷上了mapDispatchToProps的部分，然后我该如何“发动行动”呢？
在对道具的一次派遣中，我做到了以下几点：
let sdtp = (arg) => {
return (dispatch) => {
浏览 3提问于2017-11-18得票数 6
回答已采纳
在Redux中连接多个状态和相应的操作创建者的正确方式是什么？这是个好主意吗？如果这是一个愚蠢的想法，我该如何解决呢？
export default connect(
// which part of the Redux global state does
// our component want to receive as props?
(state) => {
return {
state: state.instagram
};
},
// which action creators does
// it want to receive by props?
(d
浏览 1提问于2016-02-17得票数 16
回答已采纳
我不想在mapdispatchtoprops中使用bindActionCreators。分派动作的另一种方式是什么？
我在componentdidmount()中访问它，如下所示：
this.props.getEntityData.getEntitiesAction().then({})
调度方式如下：
const mapDispatchToProps =(调度) => {
返回{
getEntityData : bindActionCreators(getEntitiesAction, dispatch)
}；
```
这起作用了，我正在获取数据。但我不想使用nindActio
浏览 0提问于2019-08-29得票数 0
1回答
我有一个习惯，当我在redux中传递信息时，我似乎重复了很多类型。当接口道具都是在ActionCreators中定义时，有什么方法可以自动生成它们吗？见下面的代码：
import { bindActionCreators, Dispatch } from "redux";
const ActionCreators = {
foo: (a: string): string => ("foo" + a),
bar: (a: number): string => ("bar" + a),
baz: (a: boolean): n
浏览 0提问于2018-11-21得票数 2
回答已采纳
我在组件中通过Redux获取数据，如下所示：
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as actionCreators from './../../_actions/actionCreators';
import './Posts.css';
function mapStateToProps(st
浏览 3提问于2017-08-08得票数 0
我是react redux的新手，这里我尝试在组件中调用两个操作。单击按钮后会出现登录页面，我正在调用一个将获取auth_token的操作，然后在componentWillReceiveProps()中用于调用另一个action.below的令牌就是我的代码
问题:当我点击按钮时，它显示了一个错误，这是我在问题标题中提到的。
用户界面：
<Button
block
bsSize="large"
disabled={!this.validateForm()}
onClick={this.handleSubmit
浏览 5提问于2018-08-28得票数 1
回答已采纳
教师在线讲课，如何采集教师的电脑桌面和摄像头录制的数据？支持教师可自己进行切换，传桌面还是传摄像头数据。希望尽快帮助解答一下。谢谢
浏览 793提问于2016-03-18
9TGO}FCWY})$$PF7EKV4(M5.png
I31%E_RAPI~1MMW18F6GZ5M.png
返回为空
浏览 205提问于2018-03-26
我正在使用redux-form不变性，我正在尝试做简单的待办事项列表，我正在使用FieldArray处理待办事项，
当表单提交时，我没有得到index的值，因为它对于用户是只读的，并且我使用div呈现。如何在表单提交过程中获取索引值。MyCustom组件应该是什么样子。
<TableRow selectable={false} key={index}>
<TableRowColumn style={styles.item}>
<Field name={`${todo}.index`} component={MyCustom} val={inde
浏览 0提问于2017-07-11得票数 0
我正在尝试找到一种方法来将这些代码转换为基于类的组件： import React, {useEffect} from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { bindActionCreators } from 'redux'
import { addComments } from './state/actions/commentActions'
export default function App() {
co
浏览 24提问于2021-07-07得票数 0
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
// import UI components
import GameList from '../components/game/GameList';
// import actions
import gameActions from '../actions/game
浏览 0提问于2017-03-13得票数 1
回答已采纳
1回答
仅指类型，但在此处用作值。
、、、、
我在编写这个时使用TypeScript。尝试创建一个将字符串作为param并更新状态的简单操作。但我知道这个错误我不明白。
src/containers/DamageClaimReceipt.tsx
import * as React from "react"
import { Text, View } from "react-native"
import { Question } from "../components/Question"
import GjeButton from "../components/GjeButton
浏览 0提问于2018-02-27得票数 1
回答已采纳
1回答
为什么函数要重写其他变量？
、、、、
我尝试用C语言编写一个代码，它从命令行中提取26个字母的长度代码，并使用该代码对消息进行加密。
int main(int argc, string argv[])
{
string k = (argv[1]);
string k_l = make_key(k, 0);
string k_u = make_key(k, 1);
}
string make_key(string key, int t)
{
if (t == 0)
{
for (int i = 0; i < 26; i++)
{
浏览 1提问于2020-05-19得票数 0
我有一个React Redux应用程序，我使用的是Flow的类型(我已经遵循了官方指南)。一切都很好，但我一直收到一条恼人的错误消息，我想不出如何解决：
无法调用bindActionCreators，因为Action 与ActionCreator不兼容
错误出现在主组件App中的mapDispatchToProps中：
App.js
import { bindActionCreators } from 'redux'
import * as actions from '../actions/index'
import type { Action, Di
浏览 1提问于2018-07-08得票数 1
在功能组件中，我将bindActionCreators与mapDispatchToProps结合使用。当我试图通过props访问它时，我看不到任何东西。下面是我如何使用它们。
function mapDispatchToProps(dispatch) {
const actions = Object.assign({}, saveActions);
return { actions: bindActionCreators(actions, dispatch) }
}
export default connect(null, mapDispatchToProps)(App);
浏览 4提问于2021-02-12得票数 0
回答已采纳
标题解释了问题。
我使用redux将用户状态更改为活动用户或活动用户.
在matchDispatchToProps中：
function matchDispatchToProps(dispatch){
return bindActionCreators({selectUser: selectUser}, dispatch);
}
就mapDispatchToProps而言：
const mapDispatchToProps = (dispatch) => ({
dispatch({selectUser: selectUser})
})
请解释一下两者之间的区别。
浏览 8提问于2017-07-27得票数 4
回答已采纳
function mapStateToProps(state) {
return { todos: state.todos }
}
function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators(actionCreators, dispatch) }
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
为什么我要使用mapDispatchToProps和bindActionCreators作为辅助工具，如果
浏览 0提问于2018-05-09得票数 1
1回答
如何删除文件所在的父dir (仅在上面的一个级别)，并使用find命令找到
find . -type f -name "*.root" -size 1M
回传
./level1/level1_chunk84/file.root
因此，我想要做的是递归删除level_chunck84 dir，例如..
谢谢
浏览 4提问于2015-06-29得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
