andyrj / hyperapp-redux-devtools

hyperapp HOA to utilize redux-devtools-extension from hyperapp
MIT License
36 stars 5 forks source link

Parameters passed to action are not visible on action payload. #11

Closed tkivela closed 6 years ago

tkivela commented 6 years ago

I'm not sure if this is a feature or a bug, but the parameters which are passed to actions are not visible in hyperapp-redux-devtools.

The action shows the type and example repo to reproduce: https://github.com/tkivela/hyperapptemplate

it has one action 'deltaCount' with signature 'delta => state'

devtools shows action like: { type: 'deltaCount', payload: { count: 2 } }

so the 'delta' parameter which is passed to the action is not shown in devtools action at all.

andyrj commented 6 years ago

Edit: I apologize I thought you were talking about a bug where the action itself wasn't getting the appActions... which I verified is not the case, https://github.com/andyrj/hyperapp-redux-devtools/blob/master/index.js#L45, so I'm gonna mark this as a enhancement/question.

This leads me to believe you want us to automatically store the action parameters in the state so that you can see them in the redux-devtools? I'm trying to think of a good way to do that, maybe it could be a seperate HOA to add that feature external to this library itself. It could just wrap each action with an update to some key in your state that shows the last actions parameters maybe? That would atleast add it to the payload of all the actions while in dev build and you just don't use the HOA in prod and your state doesn't get extended with the "parameters" slice.

tkivela commented 6 years ago

I tested the application with https://github.com/hyperapp/logger and this is what it gave out in browser console: " action deltaCount prev state Objectcount: 2proto: Object data 1 next state Objectcount: 3proto: Object "

so the "data 1" shows that value 1 was passed to deltaCount action when clicking + button, and that is the information which seems to be currently missing from hyperapp-redux-devtools. With ordinary redux + redux-devtools combination I can see the parameters passed to actions too so I think it would help debugging here also.

andyrj commented 6 years ago

I don't think I was clear what I was trying to say is you can add this with a seperate HOA. This should work for your purposes basically.

module.exports = function showActionArgs(app) {
  return function(state, actions, view, container) {
    const appActions;
    const newActions = {};
    Object.keys(actions).forEach(key => {
      newActions[key] = function() {
        const args = {
          arguments
        };
        const reducer = actions[key].apply(undefined, arguments);
        const result = typeof reducer === "function" ? reducer(state, appActions) : reducer;
        return Object.assign({}, result, args);
      };
    })
    appActions = app(state, newActions, view, container);
    return appActions;
  }
}

you would then just use it like this I think...

devtools(showActionArgs(app))(...); // replacing ... with your normal state actions etc...

this just throws the arguments object for each action, into the state, so it should show up in redux-devtools-extension. Might have to be debugged/tweaked but that's basically what you were wanting I think.

andyrj commented 6 years ago

Did the code I posted above help to add the actions to the redux-devtools output? Or where you expecting it to be added in a different way?

tkivela commented 6 years ago

Yes, that helped, thanks @andyrj !