Adds the ability to declare dependencies between selectors

Author: ctrlplusb

README.md

@@ -467,6 +467,10 @@ Declares a section of state that is derived via the given selector function.
 
       The local part of state that the `select` property was attached to.
 
+  - dependencies (Array, not required)
+
+    If this selector depends on other selectors your need to pass these selectors in here to indicate that is the case. Under the hood we will ensure the correct execution order.
+
 Select's have their outputs cached to avoid unnecessary work, and will be executed
 any time their local state changes.
 
@@ -483,10 +487,32 @@ const store = createStore({
       state.products.reduce((acc, cur) => acc + cur.price, 0)
     )
   }
-}
+};
 
 // 👇 access the derived state as you would normal state
-store.getState().shoppingBasket.totalPrice
+store.getState().shoppingBasket.totalPrice;
+```
+
+#### Example with Dependencies
+
+```javascript
+import { select } from 'easy-peasy';
+
+const totalPriceSelector = select(state =>
+  state.products.reduce((acc, cur) => acc + cur.price, 0),
+)
+
+const finalPriceSelector = select(
+  state => state.totalPrice * ((100 - state.discount) / 100),
+  [totalPriceSelector] // 👈 declare that this selector depends on totalPrice
+)
+
+const store = createStore({
+  discount: 25,
+  products: [{ name: 'Shoes', price: 160 }, { name: 'Hat', price: 40 }],
+  totalPrice: totalPriceSelector,
+  finalPrice: finalPriceSelector
+});
 ```
 
 ---

src/__tests__/easy-peasy.test.js

@@ -476,4 +476,62 @@ describe('select', () => {
     expect(actual).toEqual([{ text: 'foo' }, { text: 'bar' }])
     expect(selector).toHaveBeenCalledTimes(2)
   })
+
+  test('composed selectors', () => {
+    // arrange
+    const totalPriceSelector = select(state =>
+      state.products.reduce((acc, cur) => acc + cur.price, 0),
+    )
+    const finalPriceSelector = select(
+      state => state.totalPrice * ((100 - state.discount) / 100),
+      [totalPriceSelector],
+    )
+    const store = createStore({
+      discount: 25,
+      products: [{ name: 'Shoes', price: 160 }, { name: 'Hat', price: 40 }],
+      totalPrice: totalPriceSelector,
+      finalPrice: finalPriceSelector,
+      addProduct: (state, payload) => {
+        state.products.push(payload)
+      },
+      changeDiscount: (state, payload) => {
+        state.discount = payload
+      },
+    })
+
+    // assert
+    expect(store.getState().finalPrice).toBe(150)
+
+    // act
+    store.dispatch.addProduct({ name: 'Socks', price: 100 })
+
+    // assert
+    expect(store.getState().finalPrice).toBe(225)
+
+    // act
+    store.dispatch.changeDiscount(50)
+
+    // assert
+    expect(store.getState().finalPrice).toBe(150)
+  })
+
+  test('composed selectors in reverse decleration', () => {
+    // arrange
+    const totalPriceSelector = select(state =>
+      state.products.reduce((acc, cur) => acc + cur.price, 0),
+    )
+    const finalPriceSelector = select(
+      state => state.totalPrice * ((100 - state.discount) / 100),
+      [totalPriceSelector],
+    )
+    const store = createStore({
+      discount: 25,
+      products: [{ name: 'Shoes', price: 160 }, { name: 'Hat', price: 40 }],
+      finalPrice: finalPriceSelector,
+      totalPrice: totalPriceSelector,
+    })
+
+    // assert
+    expect(store.getState().finalPrice).toBe(150)
+  })
 })

src/easy-peasy.js

@@ -9,6 +9,8 @@ import thunk from 'redux-thunk'
 
 const effectSymbol = Symbol('effect')
 const selectSymbol = Symbol('select')
+const selectDependeciesSymbol = Symbol('selectDependencies')
+const selectStateSymbol = Symbol('selectState')
 
 const isObject = x => x && typeof x === 'object' && !Array.isArray(x)
 
@@ -32,9 +34,11 @@ export const effect = fn => {
   return fn
 }
 
-export const select = fn => {
+export const select = (fn, dependencies) => {
   const selector = memoizeOne(state => fn(state))
   selector[selectSymbol] = true
+  selector[selectDependeciesSymbol] = dependencies
+  selector[selectStateSymbol] = {}
   return selector
 }
 
@@ -65,7 +69,8 @@ export const createStore = (model, options = {}) => {
 
         if (value[selectSymbol]) {
           // skip
-          selectorReducers.push([parentPath, key, value])
+          value[selectStateSymbol] = { parentPath, key, executed: false }
+          selectorReducers.push(value)
         } else if (value[effectSymbol]) {
           // Effect Action
           const action = payload => {
@@ -156,23 +161,38 @@ export const createStore = (model, options = {}) => {
       return state
     }
     let isInitial = true
+    const runSelectorReducer = (state, selector) => {
+      const { parentPath, key, executed } = selector[selectStateSymbol]
+      if (executed) {
+        return state
+      }
+      const dependencies = selector[selectDependeciesSymbol]
+      const newState = produce(
+        dependencies ? dependencies.reduce(runSelectorReducer, state) : state,
+        draft => {
+          // eslint-disable-next-line no-param-reassign
+          const target = parentPath.length > 0 ? get(parentPath, draft) : draft
+          if (target) {
+            target[key] = selector(target)
+          }
+        },
+      )
+      // eslint-disable-next-line no-param-reassign
+      selector[selectStateSymbol].executed = true
+      return newState
+    }
+    const runSelectors = state =>
+      selectorReducers.reduce(runSelectorReducer, state)
     return selectorReducers.length
       ? (state, action) => {
           const stateAfterActions = reducerForActions(state, action)
           if (state !== stateAfterActions || isInitial) {
-            const stateAfterSelectors = selectorReducers.reduce(
-              (acc, [parentPath, key, selector]) =>
-                produce(acc, draft => {
-                  // eslint-disable-next-line no-param-reassign
-                  const target =
-                    parentPath.length > 0 ? get(parentPath, draft) : draft
-                  if (target) {
-                    target[key] = selector(target)
-                  }
-                }),
-              stateAfterActions,
-            )
+            const stateAfterSelectors = runSelectors(stateAfterActions)
             isInitial = false
+            selectorReducers.forEach(selector => {
+              // eslint-disable-next-line no-param-reassign
+              selector[selectStateSymbol].executed = false
+            })
             return stateAfterSelectors
           }
           return stateAfterActions