如何使用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
相关·内容
然后 import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { userActions } from 'redux/actions/userActions';
class Example extends Component {
componentDidMount() {
this.props.us
浏览 12提问于2020-02-01得票数 0
我正在尝试从slack api中获取频道列表，并将它们存储在redux store和react中。 axios正在获取一个[PromiseValue]，但我无法获取其中的对象： reducer文件： import * as actionTypes from "../actions/types";
import { getChannels } from "./../services/channelService";
const channelsReducer = (state = getChannels(), action) => {
switc
浏览 13提问于2019-06-13得票数 1
以下代码给出
未登录错误:必须将组件传递给connect返回的函数。相反，收到的未定义
List.js
import React from 'react';
import { connect, bindActionCreators } from 'react-redux';
import PostList from '../components/PostList'; // Component I wish to wrap with actions and state
import postList from '../Actions
浏览 6提问于2017-02-19得票数 25
回答已采纳
目前，我正在尝试将事件侦听器添加到我正在制作的应用程序中。我是通过连接到componentDidMount API来实现这一点的，该API只在组件呈现一次之后才运行，而且不会超过它。我的问题是，我正在使用来自react-redux的react-redux来将我的动作创建者绑定到store.dispatch。我不知道如何将事件侦听器绑定到使用调度绑定到存储的动作创建者的版本。有什么好办法吗？
import React, {PropTypes} from 'react';
import { bindActionCreators } from 'redux';
imp
浏览 1提问于2016-02-03得票数 5
回答已采纳
在使用React和Redux时，我遇到了这个有趣的观察。
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {fetchBooks} from '../actions'
class Sample extends Component {
componentDidMount() {
/* Fetching f
浏览 0提问于2019-06-25得票数 1
主要应用程序组件中的代码如下：
class App extends Component {
componentDidMount(){
console.log(this.ref);
debugger;
}
render() {
return (
<div>
<Header/>
{this.props.children}
<Footer/>
</div>
);
}
}
使用{this.pr
浏览 3提问于2016-10-17得票数 21
我正在开发一个react应用程序，我可以通过路线访问减速机。现在，我正面临着不使用路线而获得特定减速机的麻烦。
这是我的reducers.js：
const initialState = {
loading: false,
topics: []
};
export default createReducer(initialState, {
[LOADING_DATA]: (state, action) => {
return Object.assign({}, state, {
loading: action.loading
});
}
})
浏览 1提问于2017-07-12得票数 2
回答已采纳
我正在尝试了解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
回答已采纳
1回答
组件中的state有问题。我正试图从我的减速器那里得到状态，但是state是空的，只要得到undefined
这是我的actionCreator
export function checkLogin() {
return function(dispatch){
return sessionApi.authCheck().then(response => {
dispatch(authSuccess(true));
}).catch(error => {
throw(error)
})
}
}
我的减速器
export c
浏览 1提问于2017-02-12得票数 1
回答已采纳
2回答
我对此非常陌生，我试图编写一个应用程序，该应用程序将一个组合输出到页面的某个部分，并根据用户与该组合的交互，在DOM的其他部分的lightbox/模式中显示一些信息。
这要求我的两个呈现的组件具有某种共享状态，而我的理解是使用Redux实现这一点的最佳(或最好的)方法之一。然而，作为新的反应，现在添加了Redux的混合，我有点超出了我的深度。
我已经创建了一些动作创建者和还原器(目前非常愚蠢)，我最初要做的就是获取一些JSON并将它添加到我的商店中。但是，我无法从组件内部访问调度，而且我也不太清楚自己哪里出了问题。
如果我从组件中console.log this.props，就会得到一个空对象
浏览 4提问于2017-09-12得票数 1
回答已采纳
3回答
我有以下问题:我有一个react类(dashboardContainer)，只有当用户登录时，它才是可见的。这个类(dashboardContainer)由其他类(授权)扩展，授权类检查用户是否登录，如果数据不处于状态，则获取用户数据。这两个类都使用react连接，但是当我执行它时，它会引发下一个错误：
Uncaught :无法读取未定义的DashboardContainer.Connect (connectAdvanced.js:122)、新DashboardContainer (DashboardContainer.jsx:57)、measureLifeCyclePerf (ReactC
浏览 5提问于2017-10-15得票数 3
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
1回答
无法使用mapStateToPorps、mapDispatchToProps和redux connect()通过道具访问redux存储状态/应用程序状态和操作。调用this.props.action() (其中action()是任何动作创建者)，我收到一个错误消息：
操作未定义。
我在努力找出问题出在哪里。这里的任何帮助都将不胜感激。
App.js
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as allComment
浏览 1提问于2020-01-01得票数 0
我有一个组件，在我的组件中有一些子组件。
在我的父组件中，我有一些函数，我想从子组件中触发它。所以我用redux做了。
它是我的父组件：
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { bindActionCreators } from "redux";
import { splashStop } from "store/actions/Home/splashSt
浏览 2提问于2019-07-04得票数 1
3回答
我刚开始试验，我在路上遇到了几个问题。
当我试图在路由更改上呈现异步数据时，分派的操作将被触发两次。首先是未定义的，而不是真正的数据。
这是我的店
import { createStore, combineReducers, applyMiddleware } from 'redux'
import createLogger from 'redux-logger'
import thunk from 'redux-thunk'
import { routerReducer, routerMiddleware, push } from 'r
浏览 5提问于2017-02-22得票数 1
回答已采纳
2回答
我有这样一个连接的容器：
import React from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { autobind } from 'core-decorators';
const propTypes = {
data: PropTypes.object,
userData
浏览 1提问于2018-01-20得票数 3
回答已采纳
我在用Jest /酶编写的测试用例中遇到了一些问题。我有一个React / Redux组件，并且试图编写一个基本的测试，但是得到了以下错误：
Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was 'undefined'.
这是我的密码：
dashboardComponent.js
import '../stylesheets/dashboardCom
浏览 0提问于2018-08-31得票数 6
回答已采纳
1回答
我有一个带有购物车组件的React。当单击项目中的“添加到购物车”按钮时，我使用Redux更新购物车。问题是，即使我更新项目组件中的道具，道具也不会同时更新。当我在components选项卡中检查组件中的道具时，我只能在导航到另一个组件时才能看到道具正在更新。然而，组件从未接收到更新的支持来填充购物车项。--这些是必需的组件。
项组件
import React, { Component } from 'react';
import ProductData from './DataSet/ProductData';
import { compose } from
浏览 1提问于2020-10-18得票数 1
回答已采纳
我在使用typescript和redux-thunk操作时遇到了一些麻烦。
基本上，我的组件大量使用react-redux connect来绑定动作创建器，问题是，当我在组件中为这个redux动作创建接口时，我必须重新声明函数定义，因为它在connect调用中丢失了。
下面是一个示例代码：
动作创建者
import api from './api';
import { Dispatch } from 'redux';
import { IReduxAction } from 'model';
export const FETCH_ENTITY
浏览 52提问于2017-06-23得票数 8
回答已采纳
我试图向我的应用程序添加一个状态，当某个事件传递时，它只保存了一个布尔值。我不知道我在这里做错了什么。
减速器：
import * as actionTypes from '../constants/action-types.js';
const initialState = [{
eventPassed: false
}];
export default function eventPassed(state = initialState, action) {
switch (action.type) {
case actionTypes.EVENT_PAS
浏览 2提问于2016-11-16得票数 13
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
