Merge pull request #6 from madmax983/Reselect

Reselect

Author: madmax983

README.md

@@ -23,14 +23,14 @@ middleware: You can include redux middleware like redux-thunk here. Lightning-Re
 
 **registerReducer(name, reducer):** Adds the specified reducer function to the redux store with the specificed name as it's slice of state.
 
-**connect(mapStateToAttributes, target):** mapStateToAttributes is a key pair object where the key is the attribute on the component you want set, and the value is either the value in the redux state graph, or a callback function. This function receives the component and state to compute the value. You can pass the component you want connected, but if it isn't populated, it will get populated by event.getSource(). It also sets a dispatch expando for convenience in the component's controller methods. 
+**connect(mapStateToAttributes, target):** mapStateToAttributes either a key pair object where the key is the attribute on the component you want set, and the value is either the value in the redux state graph, or a callback function. mapStateToAttributes can also be a function that returns this key pair value. This function receives the state and component to compute the value. You can pass the component you want connected, but if it isn't populated, it will get populated by event.getSource(). It also sets a dispatch expando for convenience in the component's controller methods. 
 
 **getState():** Technically not a component method, this is a convenience expando that allows access to the Redux state.
 
 ## Installation
-Lightning-Redux Unmanaged Packaged (Redux Component, redux and redux-thunk static resource): https://login.salesforce.com/packaging/installPackage.apexp?p0=04t50000000M7PT
+Lightning-Redux Unmanaged Packaged (Redux Component, redux, redux-thunk, and reselect static resource): https://login.salesforce.com/packaging/installPackage.apexp?p0=04t50000000M7PY
 
-Lightning-Redux-Examples (Counter and Todo Examples unmanaged package): https://login.salesforce.com/packaging/installPackage.apexp?p0=04t50000000M7Pn
+Lightning-Redux-Examples (Counter and Todo Examples unmanaged package): https://login.salesforce.com/packaging/installPackage.apexp?p0=04t50000000M7Px
 
 Otherwise, you can use the SFDX CLI to convert the source and do a metadata deploy.
 

force-app/examples/default/aura/NewTodoApp/NewTodoAppController.js

@@ -1,5 +1,7 @@
 <aura:component description="NewTodoItem" controller="TodoController">
-    <ltng:require scripts="{!$Resource.redux}"
+    <ltng:require scripts="{!join(',',
+            $Resource.redux,
+            $Resource.reselect)}"
                   afterScriptsLoaded="{!c.doInit}"/>
     <aura:attribute required="false" name="todo" description="Todo" access="public" type="Todo__c" />
     <aura:attribute name="mode" type="String" default="view" />

force-app/examples/default/aura/NewTodoApp/NewTodoAppHelper.js

@@ -2,9 +2,30 @@
     doInit: function(component, event, helper) {
         component.set('v.completed', component.get("v.todo.Completed__c"));
         var store = component.find("store");
-        var mapStateToAttributes = {
-            "v.completed": helper.getTodoStatus
+
+        var getTodoStatus = Reselect.createSelector([
+                    helper.todoSelector,
+                    helper.componentSelector
+                ],
+                helper.getTodoStatus
+        );
+
+        var getTodoStatusFactory = function() {
+            return Reselect.createSelector([
+                    helper.todoSelector,
+                    helper.componentSelector
+                ],
+                helper.getTodoStatus
+            );
         }
+
+        var mapStateToAttributes = function(state, component) {
+            var getTodoStatus = getTodoStatusFactory();
+            return {
+                "v.completed": getTodoStatus
+            }
+        }
+
         store.connect(mapStateToAttributes);
     },
     edit: function(component) {

force-app/examples/default/aura/NewTodoItem/NewTodoItem.cmp

@@ -87,15 +87,24 @@
         }
     },
 
-    getTodoStatus: function(component, state) {
+    todoSelector: function(state) {
+        return state.todos;
+    },
+
+    componentSelector: function(state, component) {
+        if(component.isInstanceOf("c:NewTodoItem")) {
+            return component;
+        }
+    },
+
+    getTodoStatus: function(todos, component) {
         var status = component.get("v.completed");
         var currentTodo = component.get("v.todo");
-        state.todos.map(function(todo) {
-             if(currentTodo && currentTodo.Id && currentTodo.Id === todo.Id) {
-                 status = todo.Completed__c;
-             }
+        todos.map(function(todo) {
+            if(currentTodo.Id === todo.Id) {
+                status = todo.Completed__c;
+            }
         });
-
         return status;
     }
 })

force-app/examples/default/aura/NewTodoItem/NewTodoItemController.js

@@ -1,7 +1,8 @@
 <aura:component description="NewTodoList" controller="TodoController">
     <ltng:require scripts="{!join(',',
                     $Resource.redux,
-                    $Resource.reduxThunk)}"
+                    $Resource.reduxThunk,
+                    $Resource.reselect)}"
                   afterScriptsLoaded="{!c.doInit}"/>
     <aura:attribute required="false" name="todoList" description="Todos" access="public" type="Todo__c[]" />
 

force-app/examples/default/aura/NewTodoItem/NewTodoItemHelper.js

@@ -2,8 +2,15 @@
     doInit: function(component, event, helper) {
         var store = component.find("store");
         store.createStore("todos", helper.todoReducer, {}, ReduxThunk.default);
+
+        var getVisibleTodos = Reselect.createSelector([
+            helper.todoSelector,
+            helper.visibilitySelector],
+            helper.getVisibileTodos
+        );
+
         var mapStateToAttributes = {
-            "v.todoList": helper.getVisibileTodos
+            "v.todoList": getVisibleTodos
         }
         store.connect(mapStateToAttributes);
         store.dispatch(helper.receiveTodos(component));

force-app/examples/default/aura/NewTodoList/NewTodoList.cmp

@@ -68,16 +68,24 @@
         }
     },
 
-    getVisibileTodos: function(component, state) {
-        switch(state.visibilityFilter){
+    todoSelector: function(state, component) {
+        return state.todos;
+    },
+
+    visibilitySelector: function(state, component) {
+        return state.visibilityFilter;
+    },
+
+    getVisibileTodos: function(todos, visibilityFilter) {
+        switch(visibilityFilter){
             case "SHOW_ALL":
-                return state.todos;
+                return todos;
             case "SHOW_ACTIVE":
-                return state.todos.filter(function(todo){
+                return todos.filter(function(todo){
                     return !todo.Completed__c
                 });
             case "SHOW_COMPLETED":
-                return state.todos.filter(function(todo){
+                return todos.filter(function(todo){
                     return todo.Completed__c
                 });
         }

force-app/examples/default/aura/NewTodoList/NewTodoListController.js

@@ -123,17 +123,27 @@
         var mapStateToAttributes = params ? params.mapStateToAttributes : null;
         var target = params && params.target ? params.target : event.getSource();
 
+        if(typeof mapStateToAttributes === "function") {
+            mapStateToAttributes = mapStateToAttributes();
+        }
+
         if(window.reduxStore) {
             function handleChanges(){
-
-                var state = window.reduxStore.getState();
-
-                for(var key in mapStateToAttributes) {
-                    if(mapStateToAttributes.hasOwnProperty(key)) {
-                        if(typeof mapStateToAttributes[key] === "function") {
-                            target.set(key, mapStateToAttributes[key](target, state))
-                        } else {
-                            target.set(key, state[mapStateToAttributes[key]]);
+                if(target.isValid()) {
+                    var state = window.reduxStore.getState();
+
+                    for(var key in mapStateToAttributes) {
+                        if(mapStateToAttributes.hasOwnProperty(key)) {
+                            if(typeof mapStateToAttributes[key] === "function") {
+                                try {
+                                    var returnedFunction = mapStateToAttributes[key]();
+                                    target.set(key, returnedFunction(state, target));
+                                } catch(e) {
+                                    target.set(key, mapStateToAttributes[key](state, target))
+                                }
+                            } else {
+                                target.set(key, state[mapStateToAttributes[key]]);
+                            }
                         }
                     }
                 }