时间戳

首页 > 解决方案 > 如何调度多个动作

reactjs - 如何调度多个动作

问题描述

我正在尝试从 reducer 调度函数，但它只调用一个函数。

减速器看起来像这样：

import types from "./types";

const initState = {
  active: false,
  myData: []
};

function toggleActive(state, action) {
  return {
    ...state,
    active: action.payload
  };
}

function watchInfo(state, action) {
  return {
    ...state,
    myData: action.payload
  };
}

const watchReducer = (state = initState, action) => {

  switch (action.type) {
    case types.TOGGLE_ACTIVE:
      return toggleActive(state, action);
    case types.WATCH_DATA:
      return watchInfo(state, action);
    default:
      return state;
  }
};

export default watchReducer;

并且动作创建者设置如下：

import types from "./types";

function toggleActive(bool) {
  return {
    type: types.TOGGLE_ACTIVE,
    payload: bool
  };
}

function watchInfo(data) {
  return dispatch => {
    dispatch({
      type: types.WATCH_DATA,
      payload: data
    });
  };
}

export { toggleActive as default, watchInfo };

在我正在导入连接和相应的动作创建者的组件中，我试图像这样使用它：


const mapStateToProps = state => {
const mapDispatchToProps = dispatch => ({
  watchInfo: () => dispatch(watchInfo())
});

export default connect
  mapDispatchToProps
)(MyComponent);

因此，当我在 redux 控制台中检查时，它只调用 toggleActive，从不调用 watch info。

我不确定我做错了什么。

标签： reactjsreact-redux

解决方案

更改此动作创建者

function watchInfo(data) {
  return dispatch => {
    dispatch({
      type: types.WATCH_DATA,
      payload: data
    });
  };
}

到：

function watchInfo(data) {
  return {
      type: types.WATCH_DATA,
      payload: data
    }
}

动作创建者是一个返回代表动作的对象的函数。我们使用动作创建器来更好地维护代码并防止一些拼写错误，但是这段代码：

dispatch(watchInfo(someData))

相当于：

dispatch({
          type: types.WATCH_DATA,
          payload: someData
        })

推荐阅读