WIP Selectors

CHANGELOG.md

@@ -2,6 +2,23 @@
 
 ## 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 an object which will be merged with
+    the component's `props` using `Object.assign({}, props, substate)`.
+
+        connect(FooComponent, state => state.foo);
+
   - Filter out booleans in the html helper.
 
     Previously only `null` and `undefined` were filtered out. Now both `true`
@@ -22,6 +39,17 @@
 
         html`${items.length > 0 && ItemList()}`
 
+  - Add an optional `combineReducers` module.
+
+    The `combineReducers` function can be used to hand off state changes to
+    smaller reducers.  Each reducer takes care of one sub-tree of the state and
+    doesn't have access to the other parts.
+
+    `combineReducers` takes an object of `{name: reducer}` as the only
+    argument. The keys of the object will be used as top-level names in the
+    resulting state tree and the values will be set to the return values of
+    each of the reducers.
+
 
 ## 0.1.1 (September 12, 2017)
 

combineReducers.js

@@ -0,0 +1,10 @@
+export default function combineReducers(reducers) {
+    return function(state = {}, action, args) {
+        return Object.entries(reducers).reduce(
+            (acc, [name, reducer]) => Object.assign(acc, {
+                [name]: reducer(state[name], action, args),
+            }),
+            state
+        );
+    }
+}

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

@@ -44,9 +44,10 @@ export function createStore(reducer) {
             roots.set(root, component);
             render();
         },
-        connect(component) {
+        connect(component, selector = state => state) {
             // Return a decorated component function.
-            return (...args) => component(state, ...args);
+            return (props, ...args) =>
+                component(Object.assign({}, props, selector(state)), ...args);
         },
         dispatch(action, ...args) {
             state = reducer(state, action, args);

test/connect_test.js

@@ -3,36 +3,38 @@ require = require("@std/esm")(module, {esm: "js"});
 const assert = require("assert");
 const { createStore } = require("../index")
 
-function counter(state = 0, action) {
-    switch (action) {
-        case "INCREMENT":
-            return state + 1;
-        default:
-            return state;
-    }
-}
-
 suite("connect", function() {
     let store;
     let root;
 
+    function counter(state = 0, action) {
+        switch (action) {
+            case "INCREMENT":
+                return state + 1;
+            default:
+                return state;
+        }
+    }
+
     setup(function() {
         store = createStore(counter);
         root = document.createElement("div");
     });
 
-    test("passes the current state as the first argument", function() {
+    test("pass the current state as the first argument", function() {
         const { attach, connect, dispatch } = store;
 
         const TestApp = spyFunction();
         const ConnectedTestApp = connect(TestApp);
+
         attach(ConnectedTestApp, root);
-        dispatch("INCREMENT");
+        assert.deepEqual(TestApp.args(), [0]);
 
+        dispatch("INCREMENT");
         assert.deepEqual(TestApp.args(), [1]);
     });
 
-    test("passes other args after the state", function() {
+    test("pass other args after the state", function() {
         const { attach, connect, dispatch } = store;
 
         const TestComponent = spyFunction();
@@ -43,8 +45,54 @@ suite("connect", function() {
         }
 
         attach(TestApp, root);
-        dispatch("INCREMENT");
+        assert.deepEqual(TestComponent.args(), [0, "Foo"]);
 
+        dispatch("INCREMENT");
         assert.deepEqual(TestComponent.args(), [1, "Foo"]);
     });
 });
+
+suite("connect with a selector", function() {
+    let store;
+    let root;
+
+    function counter(state = {current: 0}, action) {
+        switch (action) {
+            case "INCREMENT":
+                return {current: state.current + 1};
+            default:
+                return state;
+        }
+    }
+
+    setup(function() {
+        store = createStore(counter);
+        root = document.createElement("div");
+    });
+
+    test("use the identity selector by default", function() {
+        const { attach, connect, dispatch } = store;
+
+        const TestApp = spyFunction();
+        const ConnectedTestApp = connect(TestApp);
+
+        attach(ConnectedTestApp, root);
+        assert.deepEqual(TestApp.args(), [{current: 0}]);
+
+        dispatch("INCREMENT");
+        assert.deepEqual(TestApp.args(), [{current: 1}]);
+    });
+
+    test("apply the selector to the state", function() {
+        const { attach, connect, dispatch } = store;
+
+        const TestApp = spyFunction();
+        const ConnectedTestApp = connect(TestApp, state => state.current);
+
+        attach(ConnectedTestApp, root);
+        assert.deepEqual(TestApp.args(), [0]);
+
+        dispatch("INCREMENT");
+        assert.deepEqual(TestApp.args(), [1]);
+    });
+});