首页 > javascript > 传播Redux动作在mapDispatchToProps中不起作用

传播Redux动作在mapDispatchToProps中不起作用 (Spreading Redux Actions does not work in mapDispatchToProps)

问题

我的mapDispatchToProps的工作原理如下:

const mapDispatchToProps = dispatch => ({
  getCourts: () => dispatch(courtActions.getCourts()),
  selectStyle: style => dispatch(courtActions.selectStyle(style)),
  selectPoint: index => dispatch(courtActions.selectPoint(index)),
  sortPoints: sort => dispatch(courtActions.sortPoints(sort))
});

我想写它像:

const mapDispatchToProps = dispatch => ({
      ...courtActions,
});

但是当我这样做时,我的行动都没有起作用(他们不会被派遣)。我确信这是显而易见的。但是这里发生了什么?

这是动作文件:

export const getCourts = () => dispatch =>
  axios
    .get("/courts")
    .then(response => dispatch({ type: GET_COURTS, payload: response.data }));

export const selectStyle = style => ({ type: SELECT_STYLE, payload: style });

export const sortPoints = type => ({ type: SORT_POINTS, payload: type });

export const selectPoint = index => ({ type: SELECT_POINT, payload: index });

export default {
  getCourts,
  selectStyle,
  sortPoints,
  selectPoint
};

解决方法

mapDispatchToProps也接受一个对象,你可以使用它而不是定义一个函数,mapDispatchToProps它需要返回使用dispatch的函数。

根据文件:

如果传递了一个对象,则其中的每个函数都被假定为Redux动作创建者。具有相同功能名称的对象,但每个动作创建者都包含在一个调度调用中,因此可以直接调用它们,它们将合并到组件的props中。

const mapDispatchToProps = courtActions;

或者您可以简单地传递courtActions第二个参数来连接

connect(mapStateToProps, courtActions)(MyComponent);

问题

My mapDispatchToProps works like this:

const mapDispatchToProps = dispatch => ({
  getCourts: () => dispatch(courtActions.getCourts()),
  selectStyle: style => dispatch(courtActions.selectStyle(style)),
  selectPoint: index => dispatch(courtActions.selectPoint(index)),
  sortPoints: sort => dispatch(courtActions.sortPoints(sort))
});

I want to write it like:

const mapDispatchToProps = dispatch => ({
      ...courtActions,
});

but when I do that none of my actions work (they dont get dispatched). I'm sure this is something obvious. But what is going on here?

Here is the actions file:

export const getCourts = () => dispatch =>
  axios
    .get("/courts")
    .then(response => dispatch({ type: GET_COURTS, payload: response.data }));

export const selectStyle = style => ({ type: SELECT_STYLE, payload: style });

export const sortPoints = type => ({ type: SORT_POINTS, payload: type });

export const selectPoint = index => ({ type: SELECT_POINT, payload: index });

export default {
  getCourts,
  selectStyle,
  sortPoints,
  selectPoint
};

解决方法

mapDispatchToProps takes an object too, which you can use instead of defining a function as mapDispatchToProps which would need to return functions that use dispatch.

According to the docs:

If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.

Example

const mapDispatchToProps = courtActions;

Or you can simply pass courtActions as the second parameter to connect like

connect(mapStateToProps, courtActions)(MyComponent);
相似信息