Add reselect and examples

vinogradov · vinogradov · commit 99b5d1280585 · 2018-06-19T18:07:48.000+04:00
diff --git a/README.md b/README.md
@@ -28,6 +28,7 @@ Name | Library Type | Original Description | Example Config | Notes
 [react](https://facebook.github.io/react/) | View layer | A javascript library for building user interfaces
 [react-router](https://github.com/ReactTraining/react-router) | Routing | Declarative routing for React 
 [redux](https://github.com/reactjs/redux/) | Data management | Predictable state container for JavaScript apps
+[reselect](https://github.com/reduxjs/reselect) | Data management | Selector library for Redux
 [react-redux](https://github.com/reactjs/react-redux) | Data management | Official React bindings for Redux
 [redux-actions](https://github.com/acdlite/redux-actions) | Data management | Flux Standard Action utilities for Redux
 [redux-thunk](https://github.com/gaearon/redux-thunk) | Data management | Thunk middleware for Redux
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "redux-logger": "3.0.6",
     "redux-saga": "0.15.4",
     "redux-thunk": "2.2.0",
+    "reselect": "3.0.1",
     "sass-loader": "6.0.6",
     "script-ext-html-webpack-plugin": "1.8.5",
     "style-loader": "0.18.2",
diff --git a/src/entry.js b/src/entry.js
@@ -8,6 +8,7 @@ import './examples/react/index';
 // import './examples/redux/separate-files';
 // import './examples/redux/separate-files-redux-actions';
 // import './examples/router';
+// import './examples/reselect/reselect-example-1';
 // import './examples/styles/cssmodules-className';
 // import './examples/styles/cssmodules-className-sass';
 // import './examples/styles/cssmodules-styleName';
diff --git a/src/examples/reselect/reselect-example-1.js b/src/examples/reselect/reselect-example-1.js
@@ -0,0 +1,38 @@
+import { createSelector } from 'reselect';
+
+const shopItemsSelector = state => state.shop.items;
+const taxPercentSelector = state => state.shop.taxPercent;
+
+const subtotalSelector = createSelector(
+  shopItemsSelector,
+  items => items.reduce((acc, item) => acc + item.value, 0)
+);
+
+const taxSelector = createSelector(
+  subtotalSelector,
+  taxPercentSelector,
+  (subtotal, taxPercent) => subtotal * (taxPercent / 100)
+);
+
+export const totalSelector = createSelector(
+  subtotalSelector,
+  taxSelector,
+  (subtotal, tax) => ({ total: subtotal + tax })
+);
+
+const exampleState = {
+  shop: {
+    taxPercent: 8,
+    items: [
+      { name: 'apple', value: 1.20 },
+      { name: 'orange', value: 0.95 },
+    ]
+  }
+};
+
+/* eslint-disable no-console */
+console.log(subtotalSelector(exampleState)); // 2.15
+console.log(taxSelector(exampleState));     // 0.172
+console.log(totalSelector(exampleState));    // { total: 2.322 }
+/* eslint-enable no-console */
+
diff --git a/yarn.lock b/yarn.lock
@@ -5239,6 +5239,10 @@ requires-port@1.0.x, requires-port@1.x.x:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+reselect@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
+
 resolve-from@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
