Search code examples
reactjsasynchronousreduxredux-thunk

Redux - Wrap actions inside another action in mapDispatchToProps


I have several actions, that are need to be used with another one action, more specific i have actions to work with doument and one action to save it, and i dont wont to repeat calling of save document, so i tried to create myself wrapper on the mapDispatchToProps and thunk.

I need to each action I pass to the method performed to thunk actions -

From

function changeAction() {
   return: {
     type: types.CHANGE
   }
}

To

function change() {
   return(dispatch, getState) => {
      dispatch(changeAction())
      saveDocument(getState());
   }
}

I tried to create method to map actions to thunk

export function mapUpdatePresentationsToProps(actions) {
    const mappedActions = {};

    Object.keys(actions).map(action => {
       mappedActions[action] = function() {
          return (dispatch, getState) => {
             dispatch(action)
             dispatch(updatePresentation(getState()))
          }
        }
    })

  return mappedActions;
}

And I always get an error 'Actions must be plain objects. Use custom middleware for async actions.' Am i doing something wrong? I dont know how i can debug them. Will be grateful for any help.


Solution

  • I guess you need to change:

    dispatch(action)
    

    to something like:

    dispatch(actions[action]())
    

    Right now it seems that you try to dispatch a string