prepare createReduce

#89

Author: HillLiu

packages/reshow-flux-base/src/__tests__/createReducerTest.js

@@ -0,0 +1,40 @@
+import { expect } from "chai";
+import sinon from "sinon";
+import createReducer from "../createReducer";
+
+describe("Test createReducer", () => {
+  let reduce;
+  beforeEach(() => {
+    reduce = createReducer((state, action) => action, []);
+  });
+
+  it("basic test", () => {
+    const [store, dispatch] = reduce;
+    const action = { aaa: "bbb" };
+    dispatch(action);
+    expect(store.getState()).to.deep.equal(action);
+  });
+
+  it("dispatch empty", () => {
+    const [store, dispatch] = reduce;
+    dispatch();
+    expect(store.getState()).to.be.empty;
+  });
+
+  it("Emit with custom event", (done) => {
+    const [store, dispatch] = reduce;
+    const callback = sinon.spy();
+    store.addListener(callback);
+    dispatch();
+    setTimeout(() => {
+      expect(callback.called).to.be.true;
+      done();
+    });
+  });
+
+  it("could support text dispatch", () => {
+    const [store, dispatch] = reduce;
+    dispatch("xxx");
+    expect(store.getState()).to.deep.equal({ type: "xxx" });
+  });
+});

packages/reshow-flux-base/src/createReducer.js

@@ -0,0 +1,44 @@
+import callfunc from "call-func";
+import { UNDEFINED, T_UNDEFINED } from "reshow-constant";
+
+const emitter = () => {
+  const pool = [];
+  return {
+    add: (handler) => pool.push(handler),
+    remove: (handler) => pool.splice(pool.indexOf(handler) >>> 0, 1),
+    emit: (state) =>
+      setTimeout(() => {
+        for (let i = 0, j = pool.length; i < j; i++) {
+          pool[i](state);
+        }
+      }),
+  };
+};
+
+const createReducer = (reduce, initState = {}) => {
+  const state = { current: callfunc(initState) };
+  const mitt = emitter();
+  const dispatch = (action = {}, params) => {
+    if (action.trim) {
+      action = { type: action };
+      params && (action.params = params);
+    }
+    const startingState = state.current;
+    const endingState = reduce(startingState, action);
+    if (endingState === T_UNDEFINED) {
+      console.error(`reduce() return ${UNDEFINED}.`);
+    }
+    if (startingState !== endingState) {
+      state.current = endingState;
+      mitt.emit(state);
+    }
+  };
+  const store = {
+    getState: () => state.current,
+    addListener: mitt.add,
+    removeListener: mitt.remove,
+  };
+  return [store, dispatch];
+};
+
+export default createReducer;

packages/reshow-flux-base/src/index.js

@@ -1,2 +1,3 @@
+export { default as createReducer } from "./createReducer";
 export { default as Store, CHANGE } from "./Store";
 export { default as Dispatcher } from "./Dispatcher";

packages/reshow-flux-base/yarn.lock

@@ -15,9 +15,9 @@ stop(){
 }
 
 watch(){
-    stop 
-    npm run build:cjs -- --watch &
-    npm run build:es -- --watch &
+  stop
+  npm run build:cjs -- --watch &
+  npm run build:es -- --watch &
 }
 
 case "$1" in

packages/reshow-flux/compile.sh

@@ -0,0 +1,17 @@
+import { Map, Set, fromJS } from "immutable";
+import { toJS } from "get-object-value";
+import { createReducer } from "reshow-flux-base";
+
+const ImmutableStore = (reduce) => createReducer(reduce, Map());
+
+const getMap = (state, k) => toJS(state.get(k)) || {}; 
+
+const mergeMap = (state, JSArray) => state.merge(fromJS(JSArray));
+
+export default ImmutableStore;
+export {
+  Map,
+  Set,
+  getMap,
+  mergeMap
+};

packages/reshow-flux/src/ImmutableStore.js

@@ -0,0 +1,24 @@
+import { expect } from "chai";
+
+import ImmutableStore, { Map, mergeMap, getMap } from "../ImmutableStore";
+
+describe("Test ImmutableStore", () => {
+  const reducee = (state, action) => mergeMap(state, action);
+
+  it("test merge map", () => {
+    const [store, dispatch] = ImmutableStore(reducee);
+    const action = { aaa: { bbb: "ccc" } };
+    dispatch(action);
+    const state = store.getState();
+    expect(Map.isMap(state.get("aaa"))).to.be.true;
+    expect(state.get("aaa").toJS()).to.deep.equal({ bbb: "ccc" });
+  });
+
+  it("test get map", () => {
+    const [store, dispatch] = ImmutableStore(reducee);
+    const action = { aaa: { bbb: "ccc" } };
+    dispatch(action);
+    const state = store.getState();
+    expect(getMap(state, 'aaa')).to.deep.equal({ bbb: "ccc" });
+  });
+});

packages/reshow-flux/src/__tests__/ImmutableStoreTest.js

@@ -63,14 +63,15 @@ describe("Test Connect hook for more test", () => {
     };
 
     expect(calculateTimes).to.equal(0);
-    const html = mount(<FakeComponent />);
+    const wrap = mount(<FakeComponent />);
     setTimeout(() => {
       expect(calculateTimes).to.equal(2); //init and handlchange
       dispatch({ aaa: "Hello dispatcher!" });
       setTimeout(() => {
-        html.update();
+        wrap.update();
         expect(calculateTimes).to.equal(3);
-        expect(html.html()).to.equal("<div>Hello dispatcher!</div>");
+        expect(wrap.html()).to.equal("<div>Hello dispatcher!</div>");
+        wrap.unmount();
         dispatch({ aaa: "Hello Unmount!" });
         expect(calculateTimes).to.equal(3);
         done();

packages/reshow-flux/src/__tests__/connectHookMoreTest.js

@@ -1,30 +1,18 @@
 import React, { Component } from "react";
-
 import { expect } from "chai";
 import { mount } from "reshow-unit";
+import { createReducer } from "reshow-flux-base";
 
 import useConnect from "../useConnect";
-import { Dispatcher, ReduceStore } from "../index";
 
 describe("Test Connect Hook", () => {
-  class FakeStore extends ReduceStore {
-    getInitialState() {
-      return {};
-    }
-
-    reduce(state, action) {
-      return action;
-    }
-  }
-
-  let dispatcher;
   let dispatch;
   let store;
 
   beforeEach(() => {
-    dispatcher = new Dispatcher();
-    dispatch = dispatcher.dispatch;
-    store = new FakeStore(dispatcher);
+    const reducer = createReducer((state, action) => action, []);
+    store = reducer[0];
+    dispatch = reducer[1];
   });
 
   it("basic test", (done) => {

packages/reshow-flux/src/__tests__/connectHookTest.js

@@ -1,7 +1,5 @@
 import callfunc from "call-func";
 import { IS_ARRAY } from "reshow-constant";
-import dedup from "array.dedup";
-import { removeEmpty } from "array.merge";
 
 const storeLocator = (props) => props?.stores;
 
@@ -11,7 +9,6 @@ const getStores = ({ props, options }) => {
   if (!IS_ARRAY(stores)) {
     stores = [stores];
   }
-  stores = dedup(removeEmpty(stores));
   const firstStore = stores[0];
   return { stores, allProps, firstStore };
 };

packages/reshow-flux/src/getStores.js

@@ -1,8 +1,8 @@
 import "setimmediate";
 import { useState, useEffect, useDebugValue } from "react";
-import { CHANGE } from "reshow-flux-base";
 import { useMounted } from "reshow-hooks";
 import { T_TRUE, T_FALSE } from "reshow-constant";
+import { CHANGE } from "reshow-flux-base";
 
 import getStores from "./getStores";
 
@@ -26,53 +26,51 @@ const handleShouldComponentUpdate = ({
   };
 };
 
-const useConnect = (options) => (props) => {
-  const {
-    calculateState,
-    shouldComponentUpdate,
-    displayName = "useConnect",
-  } = options || {};
-  useDebugValue(displayName);
-  const [data, setData] = useState(() => ({
-    props,
-    state: calculateState({}, props, options),
-  }));
+const useConnect =
+  (options = {}) =>
+  (props) => {
+    const {
+      calculateState,
+      shouldComponentUpdate,
+      displayName = "useConnect",
+      immutable,
+    } = options;
+    useDebugValue(displayName);
+    const [data, setData] = useState(() => ({
+      props,
+      state: calculateState({}, props, options),
+    }));
 
-  const isMount = useMounted();
+    const isMount = useMounted();
 
-  useEffect(() => {
-    const { stores } = getStores({ options, props });
-    const storeLen = stores.length;
-    if (storeLen) {
-      const handleChange = () => {
-        if (T_FALSE !== isMount()) {
-          setData((prev) =>
-            handleShouldComponentUpdate({
-              options,
-              shouldComponentUpdate,
-              calculateState,
-              prev,
-              props,
-            })
-          );
+    useEffect(
+      () => {
+        const { allProps, firstStore } = getStores({ options, props });
+        const handleChange = () => {
+          if (T_FALSE !== isMount()) {
+            setData((prev) =>
+              handleShouldComponentUpdate({
+                options,
+                shouldComponentUpdate,
+                calculateState,
+                prev,
+                props,
+              })
+            );
+          }
+        };
+        if (!data.__init__ || data.props !== props) {
+          handleChange();
         }
-      };
-      if (!data.__init__ || data.props !== props) {
-        handleChange();
-      }
-      const asyncHandleChange = () => setImmediate(handleChange);
-      for (let i = 0; i < storeLen; i++) {
-        stores[i].addListener(asyncHandleChange, CHANGE);
-      }
-      return () => {
-        stores.forEach((store) =>
-          store?.removeListener(asyncHandleChange, CHANGE)
-        );
-      };
-    }
-  }, [props]);
+        firstStore.addListener(handleChange, CHANGE);
+        return () => {
+          firstStore.removeListener(handleChange, CHANGE);
+        };
+      },
+      immutable ? [] : [props]
+    );
 
-  return data.state || {};
-};
+    return data.state || {};
+  };
 
 export default useConnect;

packages/reshow-flux/src/useConnect.js

@@ -1,4 +1,5 @@
 {
+  "private": true,
   "name": "reshow-runtime",
   "repository": "react-atomic/reshow",
   "keywords": [