CODEWITHSUNDEEP
reactjsreact-redux
youngster
youngster

Reputation: 195

How to dispatch multiple actions

I am trying to dispatch functions from reducer but it call only one function.

Reducer looks like this:

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;

and action creator is set like this:

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

and in component in which I am importing connect and corresponding action creator, i am trying to use it like this:


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

export default connect
  mapDispatchToProps
)(MyComponent);

So when I inspect in redux console it only calls toggleActive, never calls watch info.

I am not sure what I am doing wrong.

Upvotes: 0

Views: 807

Answers (1)

Hamid Pouladi
Hamid Pouladi

Reputation: 225

change this action creator

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

to: 

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

action creator is a function that return an object that representing an action. we use action creators for better code maintenance and prevent some Spelling error but this code:

dispatch(watchInfo(someData))

is equivalent to this:

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

Upvotes: 1

Related Questions