如何使用mapDispatchToProps
mapDispatchToProps是React Redux中的一个函数，用于将action creators绑定到组件的props上，以便在组件中触发相应的action。
使用mapDispatchToProps的步骤如下：
- 导入所需的action creators和connect函数：
import { bindActionCreators } from 'redux';
import { actionCreator1, actionCreator2 } from './actions';
import { connect } from 'react-redux';- 定义mapDispatchToProps函数，将action creators绑定到props上：
const mapDispatchToProps = dispatch => {
return bindActionCreators({
action1: actionCreator1,
action2: actionCreator2
}, dispatch);
};- 使用connect函数将组件与Redux store连接起来，并传入mapDispatchToProps作为第二个参数：
export default connect(null, mapDispatchToProps)(MyComponent);在上述代码中，actionCreator1和actionCreator2是你自己定义的action creators，可以根据业务需求进行命名和实现。mapDispatchToProps函数接收一个dispatch参数，用于将action creators与dispatch函数绑定起来。通过bindActionCreators函数，可以将多个action creators绑定到props上，使得在组件中可以直接通过props调用相应的action。
使用mapDispatchToProps的优势是可以将组件与Redux store解耦，使得组件只关注自身的状态和行为，而不需要关心具体的action dispatch过程。这样可以提高代码的可维护性和可测试性。
mapDispatchToProps的应用场景是在需要在组件中触发action并改变Redux store中的状态时使用。例如，当用户点击一个按钮时，可以通过调用props中绑定的action来触发相应的action并更新Redux store中的数据。
腾讯云相关产品中与Redux类似的状态管理工具是Tencent CloudBase，它提供了云开发能力，包括云函数、数据库、存储、托管等功能，可以帮助开发者快速构建云原生应用。您可以通过以下链接了解更多关于Tencent CloudBase的信息： Tencent CloudBase
相关·内容
我正在学习Redux React。如何使用mapDispatchToProps？我的代码如下所示
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getAddress } from '../store/actions/addressActions';
class Dashboard extends Component {
componentDidMount = () => {
this
浏览 35提问于2019-03-26得票数 2
回答已采纳
React提供函数connect来绑定Redux state，dispatch提供function组件(作为属性)。
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
mapStateToProps(state, [ownProps]): stateProps
mapDispatchToProps(dispatch, [ownProps]): dispatchProps
如何访问函数mapStateToProps mapDispatchToProps**?**中的函数添加的属性
例如，我使用函
浏览 1提问于2018-05-17得票数 4
3回答
如何测试来自mapDispatchToProps的返回调度？
export const mapDispatchToProps = (dispatch) => {
return {
sidebarSettings: () => {
dispatch(showSettings)
},
setFilterText: (value) => {
dispatch(setFilterText(value))
浏览 1提问于2019-09-05得票数 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
回答已采纳
我有一个现有的mapDispatchToProps
const mapDispatchToProps = (dispatch) => ({
updateThickness: (text, number) => {
dispatch(updateDimension('thickness', text, number))
}
})
但是现在我需要在每次updateThickness时计算音量并分派结果。其实质是：
let litres = calcVol(getState())
dispatch(updateVolume(litres))
其中getSt
浏览 4提问于2017-03-27得票数 0
回答已采纳
我是新来的。
我的代码：
主屏幕
<Text> {{this.props.mycity}} </Text>
const mapStateToProps = function(state) {
return {
mycity: state.layersFlag.baseDistrictADhabi //consist true/false
}
}
export default connect(mapStateToProps)(HomeScreen);
Sidemenu屏幕: UI
<Switch onValueChange={(fl
浏览 0提问于2019-05-16得票数 2
回答已采纳
如何在组件的mapDispatchToProps中测试两个简单操作。命令来测试我正在使用的是jest --coverage，它告诉我要测试我的代码的下一行：
export const mapDispatchToProps = (dispatch) => {
return {
----> rightText: () => dispatch(rightText()),
----> leftText: () => dispatch(leftText()),
};
};
如何在mapDispatchToProps中编写包含这两个箭头函数的测试？
浏览 3提问于2017-05-11得票数 1
回答已采纳
1回答
你好，我正在尝试用dispatch的返回来测试这个函数被调用了多少次，但真的不知道如何正确地调用dispatch
export const mapDispatchToProps = (dispatch) => {
return {
hideSidebar: () => {
dispatch(hideSidebar)
},
updateUnit: (unitObject) => {
dispatch(settingsActions.updateArray(unitObje
浏览 0提问于2019-09-09得票数 1
回答已采纳
如果您有mapDispatchToProps，并且希望检查这些方法是否在组件实例方法中调用。所以：
const mapDispatchToProps = (dispatch) => {
return {
fetchPaymentDetails: () => dispatch(fetchPaymentDetails()),
updatePaymentDetails: (payload) => dispatch(updatePaymentDetails(payload)),
clearServerErrors: () => dispatch(cl
浏览 1提问于2017-06-06得票数 1
我有以下接口：
interface EditUserContainerProps
extends RouteComponentProps<EditUserParams>,
EditUserStateProps,
EditUserDispatchProps { }
interface EditUserParams {
id: number;
history: any;
}
interface EditUserStateProps {
isLoading: boolean;
isSubmitting: boolean;
userFields: Use
浏览 5提问于2017-12-21得票数 1
回答已采纳
我在这里查看异步redux示例：
如果我添加以下内容：
function mapDispatchToProps(dispatch) {
return {};
}
export default connect(mapStateToProps,mapDispatchToProps)(App)
则在componentDidMount中不再定义分派。为什么会这样呢？在使用mapDispatchToProps时，如何在此处访问派单？
浏览 0提问于2016-09-28得票数 0
到目前为止，我一直在处理两种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
回答已采纳
下面有一个类似于这个的mapDispatchToProps函数。
export function mapDispatchToProps(dispatch, ownProps) {
return {
handleChangeLang: changeLocaleDispatcher(dispatch),
handleChange: handleChangeDispatcher(dispatch),
handleSubmit: handleSubmitDispatcher(dispatch)
}
}
我只是在我的项目中添加了redux-thunk，这样我就可以从我的动
浏览 10提问于2016-04-06得票数 0
回答已采纳
1回答
下面的第一个组件本身工作非常好，但是我希望从另一个文件导入该组件：
import * as React from 'react'
const mapStateToProps = 'something here'
const mapDispatchToProps = {
dispatchSetSomething,
dispatchSetSomething
}
type IProps = IContainer & ReturnType<typeof mapStateToProps> & typeof mapDispatchTo
浏览 3提问于2022-04-27得票数 2
2回答
我有一个属性的动态列表，我试图使用这些属性为列表中的每个对象实例化一个反应性组件。
以下是我的mapStateToProps()和mapDispatchToProps()的简化版本
export function mapStateToProps(id) {
return function(state) {
return state.widgets.find((widget) => id === widget.id);
};
}
export function mapDispatchToProps(id) {
return function (dispatch) {
浏览 2提问于2017-04-25得票数 2
回答已采纳
我读过和
以及这个概念：
components for “dumb” React components ;
containers for “smart” React components ;
但是他们没有提到mapDispatchToProps和mapDispatchToProps
这是否意味着我应该从容器中获取state和action，并且在组件中不使用mapDispatchToProps和mapDispatchToProps？
或者意味着我可以使用mapDispatchToProps，但不能在组件中使用mapDispatchToProps？
我对这个组件，容器概念感到困惑。
浏览 4提问于2016-08-24得票数 1
回答已采纳
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
我已经使用redux编写了一个容器组件，我的mapDispatchToProps实现如下所示
const mapDispatchToProps = (dispatch, ownProps) => {
return {
onChange: (newValue) => {
dispatch(updateAttributeSelection('genre', newValue));
dispatch(getTableData(newValue, ownProps.currentYear));
浏览 39提问于2016-03-07得票数 51
回答已采纳
我必须测试以下组件：
import React from 'react';
import { connect } from 'react-redux';
import { open as openModal } from 'redux/actions/ModalActions';
import { MODAL_CONTENT_ADD_TO_ALBUM } from 'constants/ModalNameConstants';
import ContentAddToAlbumModal from 'components
浏览 2提问于2021-10-11得票数 0
1回答
父组件 export interface IInvoiceDetailProps extends StateProps, DispatchProps, RouteComponentProps<{ id: string }> { }
export const InvoiceDetail = (props: IInvoiceDetailProps) => {
useEffect(() => {
props.getEntity(props.match.params.id);
}, []);
const { invoiceEntity } = prop
浏览 40提问于2021-07-27得票数 0
在功能组件中，我将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
回答已采纳
1回答
我希望使用redux reselect库来编写redux选择器。在文档中，有 描述了如何编写可供多个组件实例使用的选择器。
import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
import { makeGetVisibleTodos } from '../selectors'
const makeMapStateToProps = ()
浏览 3提问于2020-11-02得票数 0
回答已采纳
如果你需要更多的代码片段，我很乐意向你展示我正在使用React Native进入Redux，我正在构建一个非常基本的存储:它只是读取和添加数据。我正面临这样的问题:我可以用mapStateToProps连接一个组件，但是当我想使用mapDispatchToProps时，它抛出了这个TypeError：(0, _reactRedux.connect)(mapStateToProps)(mapDispatchToProps) is not a function. (In '(0, _reactRedux.connect)(mapStateToProps)(mapDispatchToPro
浏览 25提问于2021-08-26得票数 0
回答已采纳
1回答
如何正确地使用mapdispatchtoprops函数来分派给还原机？首先，我从服务器获取数据，并希望将这些数据发送到减速机。firebaseChatData函数不能传输到mapdispatchtoprops，因为它位于组件内
Messages.js
const MessageUiBody = ( { messages, loading } ) => {
const userData = JSON.parse(localStorage.getItem("user-data"));
useEffect( () => {
const
浏览 1提问于2020-04-02得票数 0
回答已采纳
我一直在试图找出关于redux的两件事
mapDispatchToProps是一个以dispatch作为参数的函数，dispatch在哪里定义？和
connect如何利用mapStateToProps和mapDispatchToProps创建临时组件(高阶组件)？
如果我正确理解，连接本质上是一个组合函数，它接受mapDispatchToProps的结果并将其传递给mapStateToProps，然后返回结果，这是一个组件，但它是如何完成的？
谢谢您抽时间见我!
浏览 0提问于2018-11-19得票数 0
回答已采纳
我正在看一个React Redux应用程序，并试图了解一切如何工作。
在其中一个组件中，我看到了以下代码行：
import { bindActionCreators } from "redux";
...
function mapDispatchToProps(dispatch) {
return bindActionCreators({ fetchPhotos }, dispatch);
}
export default connect(
null,
mapDispatchToProps
)(SearchBar);
如果我将上述代码更改为以下代码，则所有操作
浏览 0提问于2019-03-07得票数 2
回答已采纳
我正在为我的React组件编写一些测试。 import { withRouter } from 'react-router-dom';
class CityFilter extends React.Component {
handleSelect = selectedCity => {
this.props.cityFilterChanged(selectedCity)
}
render() {
return(
<Dropdown data={this.props.cityDat
浏览 25提问于2019-09-13得票数 0
1回答
员额构成部分：
import React from 'react';
import './post.styles.scss';
import { connect } from 'react-redux';
import { requestContents } from '../../redux/post/post.actions';
class Post extends React.Component {
componentWillMount(){
}
render(){
浏览 2提问于2019-08-07得票数 1
回答已采纳
我在React / Redux应用程序中使用mapDispatchToProps。
function mapDispatchToProps(dispatch) {
return bindActionCreators( { fetchUsers }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);
我看到store.dispatch()在容器中被使用，我能用它代替mapDispatchToProps吗？我不完全理解store.dispatch()，我应该在哪里使用它
浏览 7提问于2017-06-25得票数 0
回答已采纳
如何编写单元测试以确保mapDispatchToProps正确地返回包装在分派函数中的操作创建者？
我目前正在使用摩卡和酶进行测试。
这是我的容器组件。
import { Component } from 'react'
import { connect } from 'react-redux'
import Sidebar from '/components/Sidebar'
import Map from '/components/Map'
import * as LayerActions from '../actio
浏览 1提问于2016-12-14得票数 6
回答已采纳
错误:操作必须是普通对象。使用自定义中间件进行异步操作。
我试图在mapDispatchToProps中链接胖箭头函数，但它似乎不起作用。
容器和操作创建者：
// Actions Creator
const inputChange = (name: string) => (
e: React.FormEvent<HTMLInputElement>
) => ({
type: INPUT_CHANGE,
name,
value: e.currentTarget.value
});
// Dispatch
const mapDispatchToP
浏览 0提问于2019-07-05得票数 1
回答已采纳
如何从history中访问mapDispatchToProps支柱
import { withRouter } from "react-router-native";
const mapDispatchToProps = (dispatch, ownProps) => ({
doSomething: () => ownProps.history.goBack() // history is undefined ...??
})
export default withRouter(connect(undefined, mapDispatchToProps)
浏览 1提问于2018-12-07得票数 0
2回答
因此，我有以下几点：
const mapStateToProps = (state) => {
return {
messages: state.messages
};
};
const mapDispatchToProps = (
dispatch,
ownProps
) => {
return {
handleSubmit: (event) => {
event.preventDefault();
// access messages as defined in mapStateToProps here
浏览 1提问于2016-09-06得票数 0
我想将'mapdispatchtoprops‘方法调用到函数组件中。但是，它并没有像预期的那样工作“我已经共享了一些代码。
我创建了一个功能组件。这是我的代码
loadHelpers.js
import { connect } from 'react-redux';
import {loadShowInfo,getCurrentSlug }
from '../../actions/requesthandler'
export const loadHelpers= (isManualAccess) =>{
loadShowInfo(isMan
浏览 1提问于2019-08-05得票数 0
2回答
我的公司使用recompose作为我们的状态管理工具。我们正在重构我们的应用程序以使用钩子。对于下面的代码，您将如何用react钩子组件替换recompose组件？
我知道withState变成了useState，比如：
withState('something', 'setSomething', null)
变成了
const [something, setSomething] = useState(null);
withProps、withHandlers、compose、hoistStatics和lifecycle将更改为什么？
mapStateToPro
浏览 33提问于2019-04-02得票数 6
如果我只需要更改mapDispatchToProps和mapStateToProps，而不需要更改表示组件，那么是否需要临时使用？例如：
export class SomeContainer extends Component {...}
const mapStateToProps = state => {
//IMPORT HERE STATE
};
const mapDispatchToProps = (dispatch, ownProps) => ({
...someFn,
//IMPORT HERE OTHER DISPATCH FN
});
并通过更改connect
浏览 2提问于2017-06-09得票数 0
回答已采纳
我想知道如何在react-redux的connect中使用mapDispatchToProps中的异步操作创建器。
function mapDispatchToProps(dispatch) {
return {
foo: function() {
dispatch(someAction());
return function asyncAction(dispatch, getState) {
console.log("An async action!");
浏览 0提问于2016-10-13得票数 9
回答已采纳
1回答
当调度异步函数时，我正在尝试测试我的mapDispatchToProps函数。我已经读过丹·阿布拉莫夫关于如何测试mapDispatchToProps的建议，我正在试着测试我的代码。
我得到了一个错误...
TypeError: Cannot read property 'then' of undefined
这是我的测试。
describe("mapDispatchToProps", () => {
const dispatchSpy = jest.fn();
const {signupUser} = mapDispatchToPro
浏览 22提问于2017-12-23得票数 0
1回答
我试图将来自redux的道具作为呈现状态完整组件的起点，如下所示：
const MyComp = (props) => {
const initState = {
newAttribs: [...props.attribs]
};
const [state, setState] = useState(initState)
console.log(state)
};
const mapStateToProps = (fromRedux) => {...};
const mapDispatchToProps = (disp
浏览 0提问于2019-03-20得票数 2
回答已采纳
1回答
响应本机redux导出默认连接
、、、、
当我使用redux导航时，我不想分离组件。如何创建一个"const=“而不是创建一个新文件和”导出默认值“
const IntroScreen2 =connect(mapStateToProps,mapDispatchToProps)(IntroScreen2a)
const IntroScreen2 =()=> connect(mapStateToProps,mapDispatchToProps)(IntroScreen2a)
导出默认连接..。哪一个是对的？
浏览 0提问于2018-12-18得票数 1
我只是想知道Defining mapDispatchToProps As An Object怎么把ownProps传给它呢？就像函数中一样，我可以传递道具作为参数。
const mapDispatchToProps = (dispatch, ownProps) => {
toggleTodo: () => dispatch(toggleTodo(ownProps.todoId));
};
对于一个对象，如何传递ownProps？
const mapDispatchToProps = {
toggleTodo
};
我的帐户被一些低票数的问题堵住了，有趣的是，我不得不重新编辑
浏览 0提问于2018-11-22得票数 2
回答已采纳
2回答
我在中找不到任何说明onScroll触发函数的文档。我的所有组件要么是功能组件和无状态组件，要么是具有mapStateToProps和mapDispatchToProps应用编程接口的容器组件。
如何编写材料UI、List和ListItem组件来包含滚动事件，以使mapDispatchToProps中的函数能够运行？有点击事件，但没有像onScroll这样的滚动事件。
浏览 0提问于2017-12-01得票数 1
我正在尝试理解如何在导出功能组件时显示道具，如下所示 export const functionName = ({...props}) => {
console.log(props); // undefined
return <p>Hello</p>
}
functionaName.propTypes = { // propTypes here }
const mapStateToProps = state => ({ // state stuff here })
const mapDispatchToProps = { // props map
浏览 11提问于2020-09-30得票数 0
回答已采纳
mapDispatchToProps有什么用途吗：
const mapDispatchToProps = dispatch => {
return {
addProductToCart: product => dispatch(addProductToCart(product))
}
}
或者这样做是可以接受的：
const mapDispatchToProps = dispatch => {
return {dispatch};
}
然后给我打电话：
组件中的props.dispatch()
浏览 24提问于2020-02-20得票数 1
回答已采纳
如何将状态中的数据传输到mapdispatchtoprops？我获取图像的url并将其写入state，然后将此url传递给dispatch。 // State
const [imgUrl, setUrl] = useState(null);
// Map dispatch
const mapDispatchToProps = (dispatch, ownProps) => {
const { api } = ownProps;
return {
fetchLoaded: () => {
api.addData(imgUrl)
}
};
};
浏览 9提问于2020-01-20得票数 1
回答已采纳
尝试使用组件的<button>中的props来调度已为异步进程设置的redux-thunk函数，但我不太清楚如何同时使用props和函数(通过mapDispatchToProps中的react-redux connect连接到组件)，但我就是想不出如何同时调用props和函数。
function loadData(dispatch, medium) {
console.log(dispatch)
return dispatch({type: 'LOADING_COMPONENT'})
return axios.get(`/professiona
浏览 1提问于2017-12-06得票数 0
我正在研究Redux，虽然我知道它是如何工作的，但我不能完全确定我是否正确地使用了它。 Redux Documentation提供了大量关于如何将功能组件连接到我的操作的示例。但是有没有办法直接从函数中调用我的操作呢？ 有没有可能让这样的东西工作呢？ function mapDispatchToProps(dispatch) {
return {
saveUserData: user => dispatch(saveUserData(user))
};
}
function ConnectedUserInfo(){
console.log("fetchin
浏览 26提问于2020-01-24得票数 0
我想使用React-Redux和typeScript来分发操作，但是当我使用mapDisPatchToProps()时，我不知道如何定义dispatch的类型，下面是我的代码：
这是组件文件：
import * as React from 'react';
import Content from '../component/content';
interface Props {
allCityInformation: {'cityName': string, 'img': string}[]
浏览 0提问于2017-09-06得票数 0
我希望能够访问mapDispatchToProps中的事件对象，同时发送一个param。你怎么处理这个？
到目前为止，这就是我所拥有的：
const mapDispatchToProps = dispatch => ({
onRowClick: (id, event) => {
console.log(id, event)
},
})
我认为：
<TR key={`${index}`} onClick={() => onRowClick(id, event)}>
然而，这是不正确的。如何分派事件、传递param以及访问事件对象？
浏览 0提问于2018-03-27得票数 1
回答已采纳
1回答
我正在尝试设置受保护的路由，其中用户被重定向到/login页面，如果他们没有登录，但它不工作时使用redux。
这是我的ProtectedRoute组件：
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';
import { authenticat
浏览 0提问于2019-05-16得票数 0
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
腾讯云开发者
