react-ui-basics 0.0.217 → 0.0.218

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-basics",
-  "version": "0.0.217",
+  "version": "0.0.218",
   "description": "",
   "module": "index.js",
   "_main": "index.cjs.js",

package/src/store/Store.test.js

@@ -3,7 +3,7 @@ import {mount} from 'enzyme';
 import Store, {useStore} from "./Store";
 import {act} from 'react-dom/test-utils';
 
-it('test 1', () => {
+it('basic test, rerender on each change', () => {
     const store = new Store({
         count: 0,
         value: ''
@@ -44,14 +44,14 @@ it('test 1', () => {
 });
 
 
-it('test 2', () => {
+it('no rerender if selector value doesn\'t change', () => {
     const store = new Store({
         count: 0,
         value: ''
     });
     let renderCount = 0
     const MyComponent = () => {
-        let count = useStore(store, it=> it.count);
+        let count = useStore(store, it => it.count);
         renderCount++
         return <div>{count}</div>;
     };
@@ -73,8 +73,7 @@ it('test 2', () => {
         })
     });
     expect(wrapper).toHaveHTML('<div>1</div>');
-    // react executes functional-component after first setState with the same value
-    expect(renderCount).toBe(3);
+    expect(renderCount).toBe(2);
 
     act(() => {
         store.set({
@@ -82,5 +81,36 @@ it('test 2', () => {
         })
     });
     expect(wrapper).toHaveHTML('<div>1</div>');
-    expect(renderCount).toBe(3);
+    expect(renderCount).toBe(2);
+});
+
+it('update value if selector dependencies change', () => {
+    const store = new Store({
+        key: 'foo',
+        foo: 'foo',
+        bar: 'bar',
+    });
+    let renderCount = 0
+    let renderedValue = []
+
+    const MyComponent = () => {
+        let key = useStore(store, it => it.key);
+        let value = useStore(store, it => it[key], [key]);
+        renderCount++
+        renderedValue.push(value)
+        return <div>{value}</div>;
+    };
+    const wrapper = mount(<MyComponent/>);
+    expect(wrapper).toHaveHTML('<div>foo</div>');
+    expect(renderCount).toBe(1);
+    expect(renderedValue).toEqual(['foo']);
+
+    act(() => {
+        store.set(it => {
+            it.key = 'bar'
+        })
+    });
+    expect(wrapper).toHaveHTML('<div>bar</div>');
+    expect(renderCount).toBe(2);
+    expect(renderedValue).toEqual(['foo', 'bar']);
 });

package/src/store/Store.ts

@@ -1,4 +1,4 @@
-import {useEffect, useState} from "react";
+import {useEffect, useReducer} from "react";
 import {createProxy} from "./ProxyTools";
 import {isFunction, isObject} from "../Tools";
 
@@ -86,15 +86,19 @@ export function useStore<T, R>(store: Store<T>, selector?: Selector<T, R>, selec
     if (!selector)
         selector = (defaultSelector as Selector<T, R>)
 
-    const [state, setState] = useState(() => selector(store.get()))
+    const [_, forceUpdate] = useReducer(x => x + 1, 0);
+    let value = selector(store.get())
 
     useEffect(() => {
         const updateState = () => {
-            setState(selector(store.get()))
+            let next = selector(store.get())
+            if (value !== next) {
+                value = next
+                forceUpdate()
+            }
         };
-        updateState()
         return store.subscribe(updateState)
     }, selectorDependencies)
 
-    return state
+    return value
 }

package/store/Store.js

@@ -1,4 +1,4 @@
-import ReactConstants from "./../ReactConstants"; import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields"; import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers"; import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers"; import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers"; import { useState, useEffect } from 'react';
+import ReactConstants from "./../ReactConstants"; import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields"; import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers"; import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers"; import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers"; import { useReducer, useEffect } from 'react';
 import { createProxy } from './ProxyTools.js';
 import { isFunction, isObject } from '../Tools.js';
 
@@ -56,15 +56,19 @@ const defaultSelector = (store) => store;
 function useStore(store, selector, selectorDependencies = []) {
     if (!selector)
         selector = defaultSelector;
-    const [state, setState] = useState(() => selector(store.get()));
+    const [_, forceUpdate] = useReducer(x => x + 1, 0);
+    let value = selector(store.get());
     useEffect(() => {
         const updateState = () => {
-            setState(selector(store.get()));
+            let next = selector(store.get());
+            if (value !== next) {
+                value = next;
+                forceUpdate();
+            }
         };
-        updateState();
         return store.subscribe(updateState);
     }, selectorDependencies);
-    return state;
+    return value;
 }
 
 export { Store, Store as default, defaultSelector, getGlobalState, useStore };

package/store/Store.js.map

@@ -1 +1 @@
-{"version":3,"file":"Store.js","sources":["../src/store/Store.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
+{"version":3,"file":"Store.js","sources":["../src/store/Store.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}