Redux not dispatching action

Question

I'm using React-dnd combined with Redux but I can't dispatch an action. My action is called but the reducer is never called :

const spelSource = {
    drop(props, monitor) {
        updateD(monitor.getItem(), props.spel);
    }
};

const mapDispatchToProps = {
    updateD: (newS, oldS) => updateDeck(newS, oldS),
};

export default connect(
    null, mapDispatchToProps
)(Spel)

Spel = DropTarget('spel', spelSource, collect)(Spel);

and in my action :

export function updateD(newS, oldS) {
    console.log("update");
    return function (dispatch) {
        return dispatch({
            type:"UPDATE_D",
            newS: newS,
            oldS: oldS
        });
    };
}

Finally the reducer :

    case 'UPDATE_D':
        return Object.assign({}, state, {
            d: finalUpdate(state, action)
        });

Is there a way to dispatch? Thanks!

You can replace that mapDispatchToProps with `const mapDispatchToProps = { updateDeck };` quite simpler. — enapupe, Jan 31 '19 at 14:41

score 4 · Accepted Answer · answered Jan 31 '19 at 16:26

You are trying to dispatch from the action, but you need Redux to dispatch the action itself. Your action should just return an object with type property and payload (whatever else). The action gets wrapped in the dispatch() function by the connect() function with mapDispatchToProps. Traditionally, you do like this...

const mapDispatchToProps = dispatch => ({
  updateD: (newS, oldS) => dispatch(updateDeck(newS, oldS))
});

There are some shorter ways to do this in this article, but this is the traditional way. You can see that the connect() function takes this and will pass it through the dispatch() method of the Redux store.

Then, your action will just return the object:

export const UPDATE_D = 'UPDATE_D';

export const updateD = (newS, oldS) => ({
    type: UPDATE_D,
    newS,
    oldS
});

Finally, your reducer:

switch (action.type) {
  case UPDATE_D:
    return {
      ...state,
      newS: action.newS,
      oldS: action.oldS
     };
     default:
       return state;
   }

score 2 · Answer 2 · answered Jan 31 '19 at 14:37

2

You need to use this.props to properly dispatch that action from your component.

E.g, in spelSource, this.props.updateD(monitor.getItem(), props.spel)

answered Jan 31 '19 at 14:37

rustyshackleford

692
1
7
22

Thanks for answering! The fact is when I do that I got this error : `Uncaught TypeError: Cannot read property 'updateD' of undefined` – Zeyukan Ich' Jan 31 '19 at 14:41
@ZeyukanIch' are you importing your function from redux? – rustyshackleford Jan 31 '19 at 14:48
Yes I'am importing it from my action – Zeyukan Ich' Jan 31 '19 at 14:49

score 1 · Answer 3 · answered Jan 31 '19 at 14:42

may be an error that action returns a function instead of object. And this inner function is never called.

I would expect to see something like:

const mapDispatchToProps = dispatch => {
  return {
    updateD: (newS, oldS) => dispatch({
            type:"UPDATE_D",
            newS: newS,
            oldS: oldS
        })
  }
}

Redux not dispatching action

3 Answers3