Question

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

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，而从不调用观看信息。

我不确定自己在做什么错。

Answer 1

更改此动作的创建者

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
        })

如何分派多个动作

1 个答案: