Pass an optional selector to connect

Author: stasm

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+  - `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.
+
+        connect(FooComponent, state => state.foo);
+
   - Filter out booleans in the html helper.
 
     Previously only `null` and `undefined` were filtered out. Now both `true`

index.js

@@ -44,9 +44,9 @@ 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 (...args) => component(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]);
+    });
+});