feat: update articles

架构与优化/Redux/工程实践/辅助库.md

@@ -2,6 +2,8 @@
 
 # Redux 常用辅助库
 
+# ducks
+
 # redux-actions
 
 redux-actions 是一个辅助快速构建标准的 Flux Action 的工具集，也提供了快速构建 Reducer 的接口。可以使用 npm 进行安装使用：
@@ -11,32 +13,32 @@ npm install --save redux-actions
 ```
 
 ```js
-import { createAction, handleAction, handleActions } from 'redux-actions';
+import { createAction, handleAction, handleActions } from "redux-actions";
 ```
 
 ## createAction(type, payloadCreator = Identity, ?metaCreator)
 
 将一个 Action Creator 封装成一个标准的 Flux Action 构造器，如果没有传入任何的 Payload Creator，那么会使用默认的函数，基本的使用例子如下：
 
 ```js
-let increment = createAction('INCREMENT', amount => amount);
+let increment = createAction("INCREMENT", amount => amount);
 // same as
-increment = createAction('INCREMENT');
+increment = createAction("INCREMENT");
 
 expect(increment(42)).to.deep.equal({
-  type: 'INCREMENT',
+  type: "INCREMENT",
   payload: 42
 });
 ```
 
 如果传入的 payload 是一个 Error Object，redux-actions 会自动将`action.error`设置为`true`:
 
 ```js
-const increment = createAction('INCREMENT');
+const increment = createAction("INCREMENT");
 
-const error = new TypeError('not a number');
+const error = new TypeError("not a number");
 expect(increment(error)).to.deep.equal({
-  type: 'INCREMENT',
+  type: "INCREMENT",
   payload: error,
   error: true
 });
@@ -77,20 +79,38 @@ const reducer = handleActions(
 # reselect
 
 ```js
-export function defaultMemoize(func, equalityCheck = defaultEqualityCheck) {
-  let lastArgs = null;
-  let lastResult = null;
-  // we reference arguments instead of spreading them for performance reasons
-  return function() {
-    if (!areArgumentsShallowlyEqual(equalityCheck, lastArgs, arguments)) {
-      // apply arguments instead of spreading for performance.
-      lastResult = func.apply(null, arguments);
-    }
-
-    lastArgs = arguments;
-    return lastResult;
-  };
-}
+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 })
+);
+
+let exampleState = {
+  shop: {
+    taxPercent: 8,
+    items: [{ name: "apple", value: 1.2 }, { name: "orange", value: 0.95 }]
+  }
+};
+
+console.log(subtotalSelector(exampleState)); // 2.15
+console.log(taxSelector(exampleState)); // 0.172
+console.log(totalSelector(exampleState)); // { total: 2.322 }
 ```
 
 # redux-mock-store