Merge props of connected components

Author: stasm

CHANGELOG.md

@@ -2,11 +2,20 @@
 
 ## Unreleased
 
+  - Encourage passing the `props` object as the first argument to components.
+
+    Components are just functions so this isn't mandatory and you can still
+    define arguments as you see fit.  The pattern of passing `props` makes
+    composition easier, encourages code which is more readable and decouples
+    the implementation of the component from the action of connecting it to the
+    store.  From now on, connecting will only work for components with zero
+    arity or which take an object as the first argument.
+
   - `connect` now takes a selector as an optional second argument.
 
     You can now pass an optional selector function to `connect`.  It will be
-    passed the `state` and should return whatever the connected component
-    expects as the first argument.
+    passed the `state` and should return an object which will be merged with
+    the component's `props` using `Object.assign({}, props, substate)`.
 
         connect(FooComponent, state => state.foo);
 

example01/ActiveList.js

@@ -3,12 +3,11 @@ import { connect } from "./store";
 import ActiveTask from "./ActiveTask";
 import TaskInput from "./TaskInput";
 
-function ActiveList(state) {
-    const { tasks } = state;
+function ActiveList({tasks}) {
     return html`
         <h2>My Active Tasks</h2>
         <ul>
-            ${tasks.map(ActiveTask)}
+            ${tasks.map((task, index) => ActiveTask({task, index}))}
             <li>
                 ${TaskInput()}
             </li>

example01/ActiveTask.js

@@ -1,9 +1,9 @@
 import html from "../index";
 
-export default function ActiveTask(text, index) {
+export default function ActiveTask({task, index}) {
     return html`
         <li>
-            ${text}
+            ${task}
             <button
                 onclick="dispatch('COMPLETE_TASK', ${index})">
                 Mark As Done</button>

example01/ArchivedList.js

@@ -2,12 +2,11 @@ import html from "../index";
 import { connect } from "./store";
 import ArchivedTask from "./ArchivedTask";
 
-function ArchiveList(state) {
-    const { archive } = state;
+function ArchiveList({archive}) {
     return html`
         <h2>Completed Tasks</h2>
         <ul>
-            ${archive.map(ArchivedTask)}
+            ${archive.map(task => ArchivedTask({task}))}
         </ul>
     `;
 }

example01/ArchivedTask.js

@@ -1,9 +1,9 @@
 import html from "../index";
 
-export default function ArchivedTask(text) {
+export default function ArchivedTask({task}) {
     return html`
         <li style="color:#666; text-decoration:line-through">
-            ${text}
+            ${task}
         </li>
     `;
 }

example03/App.js

@@ -1,12 +1,11 @@
 import html from "../index";
-import { connect } from "./store";
 
 import TextInput from "./TextInput";
 import CharCounter from "./CharCounter";
 
 export default function App(idx) {
     return html`
-        ${TextInput(idx)}
+        ${TextInput({idx})}
         ${CharCounter()}
     `;
 }

example03/TextInput.js

@@ -1,7 +1,7 @@
 import html from "../index";
 import { connect } from "./store";
 
-function TextInput({value}, idx) {
+function TextInput({value, idx}) {
     return html`
         <textarea id="text-input-${idx}"
             placeholder="Type here…"

index.js

@@ -46,7 +46,8 @@ export function createStore(reducer) {
         },
         connect(component, selector = state => state) {
             // Return a decorated component function.
-            return (...args) => component(selector(state), ...args);
+            return (props, ...args) =>
+                component(Object.assign({}, props, selector(state)), ...args);
         },
         dispatch(action, ...args) {
             state = reducer(state, action, args);