{"action":"created","issue":{"url":"https://api.github.com/repos/hyperapp/hyperapp/issues/751","repository_url":"https://api.github.com/repos/hyperapp/hyperapp","labels_url":"https://api.github.com/repos/hyperapp/hyperapp/issues/751/labels{/name}","comments_url":"https://api.github.com/repos/hyperapp/hyperapp/issues/751/comments","events_url":"https://api.github.com/repos/hyperapp/hyperapp/issues/751/events","html_url":"https://github.com/hyperapp/hyperapp/issues/751","id":354944667,"node_id":"MDU6SXNzdWUzNTQ5NDQ2Njc=","number":751,"title":"Parameterization of actions in V2","user":{"login":"jorgebucaran","id":56996,"node_id":"MDQ6VXNlcjU2OTk2","avatar_url":"https://avatars1.githubusercontent.com/u/56996?v=4","gravatar_id":"","url":"https://api.github.com/users/jorgebucaran","html_url":"https://github.com/jorgebucaran","followers_url":"https://api.github.com/users/jorgebucaran/followers","following_url":"https://api.github.com/users/jorgebucaran/following{/other_user}","gists_url":"https://api.github.com/users/jorgebucaran/gists{/gist_id}","starred_url":"https://api.github.com/users/jorgebucaran/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jorgebucaran/subscriptions","organizations_url":"https://api.github.com/users/jorgebucaran/orgs","repos_url":"https://api.github.com/users/jorgebucaran/repos","events_url":"https://api.github.com/users/jorgebucaran/events{/privacy}","received_events_url":"https://api.github.com/users/jorgebucaran/received_events","type":"User","site_admin":false},"labels":[{"id":522275188,"node_id":"MDU6TGFiZWw1MjIyNzUxODg=","url":"https://api.github.com/repos/hyperapp/hyperapp/labels/Discussion","name":"Discussion","color":"7057ff","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":14,"created_at":"2018-08-28T23:50:48Z","updated_at":"2018-08-30T20:14:25Z","closed_at":null,"author_association":"MEMBER","body":"The goal of this issue is documenting and formalizing how to use [parameterized actions](https://github.com/hyperapp/hyperapp/issues/749#parameterizing-actions). If you are not familiar with the new V2 Action API, please see #749.\r\n\r\nIn V2, the runtime (Hyperapp) calls our actions, not us. So, how do we pass a value to an action?\r\n\r\n```js\r\nconst IncrementBy = (state, { value }) => ({ value: state.value + value })\r\n```\r\n\r\nThere have been two approaches on the table since the original V2 announcement was made in #672. Using a two-element array (henceforth referred to as _tuple_) or using an object. \r\n\r\nYour mission, should you choose to accept it, consists of choosing the best _between_ these two options. Good luck!\r\n\r\n## Options\r\n### Tuple Syntax\r\n\r\n```jsx\r\n[Action, props]\r\n```\r\n\r\n#### Pros\r\n\r\n- Concise\r\n- Props need not be an object (a single primitive value works)\r\n- Can be used with effects and subscriptions seamlessly\r\n- Closer to the tuple syntax in elm\r\n\r\n#### Cons\r\n\r\n- Using arrays as tuples may be odd to newcomers\r\n- We are going to use tuples to describe actions that produce side-effects too [newState, nextEffect]\r\n\r\n### Object Syntax\r\n\r\n```jsx\r\n{\r\n  action: Action,\r\n  ...props\r\n}\r\n```\r\n\r\n#### Pros\r\n- Descriptive\r\n- More idiomatic (people are used to objects)\r\n\r\n#### Cons\r\n- Verbose\r\n- Awkward when used with effects and subscriptions\r\n- Reserves the name `action` (you can't have a prop named `action` in your state)\r\n\r\n## Examples\r\n### One-line Example\r\n###### Tuple-syntax\r\n\r\n```jsx\r\n<button onClick={[IncrementBy, { value: 100 }]}>Add One Hundred</button>\r\n```\r\n\r\n###### Object-syntax\r\n\r\n```jsx\r\n<button onClick={{ action: IncrementBy, value: 100 }}>Add One Hundred</button>\r\n```\r\n\r\n### Medium Example\r\n###### Tuple-syntax\r\n\r\n```jsx\r\n<button\r\n  onClick={[\r\n    FollowUser,\r\n    {\r\n      userId: props.userId,\r\n      follow: true\r\n    }\r\n  ]}\r\n>\r\n  Follow\r\n</button>\r\n```\r\n\r\n###### Object-syntax\r\n\r\n```jsx\r\n<button\r\n  onClick={{\r\n    action: FollowUser,\r\n    userId: props.userId,\r\n    follow: true\r\n  }}\r\n>\r\n  Follow\r\n</button>\r\n```\r\n\r\n### Verbose Example\r\n###### Tuple-syntax\r\n\r\n```jsx\r\n<button\r\n  onClick={[\r\n    EngageDrive,\r\n    {\r\n      warp: 10,\r\n      course: {\r\n        id: 113,\r\n        mark: 7\r\n      },\r\n      impulse: false\r\n    }\r\n  ]}\r\n>\r\n  Engage\r\n</button>\r\n```\r\n\r\n###### Object-syntax\r\n\r\n```jsx\r\n<button\r\n  onClick={{\r\n    action: EngageDrive,\r\n    warp: 10,\r\n    course: {\r\n      id: 113,\r\n      mark: 7\r\n    },\r\n    impulse: false\r\n  }}\r\n>\r\n  Engage\r\n</button>\r\n```\r\n\r\n\r\n## Abandoned Options\r\n\r\nA third option consists of currying the actions. Unfortunately, <a href=\"https://github.com/hyperapp/hyperapp/issues/749#parameterizing-actions-gotchas\">it has several disadvantages</a>: poor debugability, non-declarative, invalidation of strict equality checks when diffing props from events, effects and subscriptions. "},"comment":{"url":"https://api.github.com/repos/hyperapp/hyperapp/issues/comments/417452469","html_url":"https://github.com/hyperapp/hyperapp/issues/751#issuecomment-417452469","issue_url":"https://api.github.com/repos/hyperapp/hyperapp/issues/751","id":417452469,"node_id":"MDEyOklzc3VlQ29tbWVudDQxNzQ1MjQ2OQ==","user":{"login":"ericdmoore","id":25398118,"node_id":"MDQ6VXNlcjI1Mzk4MTE4","avatar_url":"https://avatars0.githubusercontent.com/u/25398118?v=4","gravatar_id":"","url":"https://api.github.com/users/ericdmoore","html_url":"https://github.com/ericdmoore","followers_url":"https://api.github.com/users/ericdmoore/followers","following_url":"https://api.github.com/users/ericdmoore/following{/other_user}","gists_url":"https://api.github.com/users/ericdmoore/gists{/gist_id}","starred_url":"https://api.github.com/users/ericdmoore/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ericdmoore/subscriptions","organizations_url":"https://api.github.com/users/ericdmoore/orgs","repos_url":"https://api.github.com/users/ericdmoore/repos","events_url":"https://api.github.com/users/ericdmoore/events{/privacy}","received_events_url":"https://api.github.com/users/ericdmoore/received_events","type":"User","site_admin":false},"created_at":"2018-08-30T20:14:25Z","updated_at":"2018-08-30T20:14:25Z","author_association":"NONE","body":"My comment was not intended to be disparaging of any prior comments, but merely a reaction of recent things at work where a prior voting process led to a \"short term win\" - and now a \"long term frustration\".  The lesson learned was that the direction of a vote, and the conviction of that vote are nice to have together."}}
{"actor":{"display_login":"ericdmoore"}}