@webkrafters/react-observable-context 2.1.2 → 2.1.4-rc.0

package/README.md

@@ -1,267 +1,287 @@
-# React-Observable-Context
-
-A context bearing an observable consumer store. State changes within the store's internal state are only broadcasted to components subscribed to the store. In this way, the `React-Observable-Context` prevents repeated automatic re-renderings of entire component trees resulting from ***context*** state changes.
-
-**React::memo** *(and PureComponents)* remain the go-to solution for the repeated automatic re-renderings of entire component trees resulting from ***component*** state changes. 
-
-_**Recommendation:**_ Wrap all components calling this package's ***useContext*** function in **React::memo**. This will protect such component and its descendants from unrelated cascading render operations. 
-
-<h4><u>Install</u></h4>
-
-npm i -S @webkrafters/react-observable-context
-
-npm install --save @webkrafters/react-observable-context
-
-## API
-
-The React-Observable-Context package exports **3** modules namely: the **createContext** method, the **useContext** hook and the **Provider** component.
-
-* **createContext** is a zero-parameter funtion returning a store-bearing context. Pass the context to the React::useContext() parameter to obtain the context's `store`.
-
-* **useContext** is analogous to React::useContext hook but returns the context store and takes a second parameter named ***watchedKeys***. The `watchedKeys` parameter is a list of state object property paths to watch. A change in any of the referenced properties automatically triggers a render of the component calling this hook.
-
-* **Provider** can immediately be used as-is anywhere the React-Observable-Context is required. It accepts **3** props and the customary Provider `children` prop. Supply the context to its `context` prop; the initial state to the customary Provider `value` prop; and the optional `prehooks` prop <i>(discussed in the prehooks section below)</i>.
-
-***<u>Note:</u>*** the Provider `context` prop is not updateable. Once set, all further updates to this prop are not recorded.
-
-### The Store
-
-The context's `store` exposes **4** methods for interacting with the context's internal state namely:
-
-* **getState**: (selector?: (state: State) => any) => any
-
-* **resetState**: VoidFunction // resets the state to the Provider initial `value` prop.
-
-* **setState**: (changes: PartialState\<State\>) => void // sets only new/changed top level properties.
-
-* **subscribe**: (listener: (newValue: PartialState\<State\>, oldValue: PartialState\<State\>) => void) => ***UnsubscribeFunction***
-
-### Prehooks
-
-The context's store update operation adheres to **2** user supplied prehooks when present. Otherwise, the update operation proceeds normally to completion. They are named **resetState** and **setState** after the store update methods which utilize them.
-
-* **resetState**: (state: {current: State, original: State}) => boolean
-
-* **setState**: (newChanges: PartialState\<State\>) => boolean
-
-***<u>Use case:</u>*** prehooks provide a central place for sanitizing, modifying, transforming, validating etc. all related incoming state updates. The prehook returns a **boolean** value (`true` to continue AND `false` to abort the update operation). The prehook may mutate (i.e. sanitize, transform, transpose) its argument values to accurately reflect the intended update value.
-
-## Usage
-
-<i><u>context.js</u></i>
-
-    import { createContext } from '@webkrafters/react-observable-context';
-	const ObservableContext = createContext();
-    export default ObservableContext;
-
-<i><u>reset.js</u></i>
-
-    import React, { memo, useEffect } from 'react';
-	import { useContext } from '@webkrafters/react-observable-context';
-	import ObservableContext from './context';
-	const Reset = memo(() => {
-		const { resetState } = useContext( ObservableContext );
-		useEffect(() => console.log( 'Reset component rendered.....' ));
-		return ( <button onClick={ resetState }>reset context</button> );
-	});
-	Reset.displayName = 'Reset';
-    export default Reset;
-
-<i><u>tally-display.js</u></i>
-
-    import React, { memo, useEffect } from 'react';
-	import { useContext } from '@webkrafters/react-observable-context';
-	import ObservableContext from './context';
-	import Reset from './reset';
-    const CONTEXT_KEYS = [ 'color', 'price', 'type' ];
-    const TallyDisplay = memo(() => {
-	    const { getState } = useContext( ObservableContext, CONTEXT_KEYS );
-	    useEffect(() => console.log( 'TallyDisplay component rendered.....' ));
-	    return (
-			<div>
-				<table>
-					<tbody>
-						<tr><td><label>Type:</label></td><td>{ getState( s => s.type ) }</td></tr>
-						<tr><td><label>Color:</label></td><td>{ getState( s => s.color ) }</td></tr>
-						<tr><td><label>Price:</label></td><td>{ getState( s => s.price ).toFixed( 2 ) }</td></tr>
-					</tbody>
-				</table>
-				<div style={{ textAlign: 'right' }}>
-					<Reset />
-				</div>
-			</div>
-		);
-    });
-    TallyDisplay.displayName = 'TallyDisplay';
-    export default TallyDisplay;
-
-<i><u>editor.js</u></i>
-
-    import React, { memo, useCallback, useEffect, useRef } from 'react';
-	import { useContext } from '@webkrafters/react-observable-context';
-	import ObservableContext from './context';
-    const Editor = memo(() => {
-	    const { setState } = useContext( ObservableContext );
-	    const priceInputRef = useRef();
-	    const colorInputRef = useRef();
-	    const typeInputRef = useRef();
-	    const updatePrice = useCallback(() => {
-		    setState({ price: Number( priceInputRef.current.value ) });
-	    }, []);
-	    const updateColor = useCallback(() => {
-		    setState({ color: colorInputRef.current.value });
-	    }, []);
-	    const updateType = useCallback(() => {
-		    setState({ type: typeInputRef.current.value });
-	    }, []);
-	    useEffect(() => console.log( 'Editor component rendered.....' ));
-	    return (
-		    <fieldset style={{ margin: '10px 0' }}>
-			    <legend>Editor</legend>
-			    <div style={{ margin: '10px 0' }}>
-				    <label>New Price: <input ref={ priceInputRef } /></label>
-				    { ' ' }
-				    <button onClick={ updatePrice }>update price</button>
-			    </div>
-			    <div style={{ margin: '10px 0' }}>
-				    <label>New Color: <input ref={ colorInputRef } /></label>
-				    { ' ' }
-				    <button onClick={ updateColor }>update color</button>
-			    </div>
-			    <div style={{ margin: '10px 0' }}>
-				    <label>New Type: <input ref={ typeInputRef } /></label>
-				    { ' ' }
-				    <button onClick={ updateType }>update type</button>
-			    </div>
-		    </fieldset>
-	    );
-	});
-    Editor.displayName = 'Editor';
-    export default Editor;
-
-<i><u>product-description.js</u></i>
-
-    import React, { memo, useEffect } from 'react';
-	import { useContext } from '@webkrafters/react-observable-context';
-	import ObservableContext from './context';
-	const CONTEXT_KEYS = [ 'color', 'type' ];
-    const ProductDescription = memo(() => {
-	    const store = useContext( ObservableContext, CONTEXT_KEYS );
-	    useEffect(() => console.log( 'ProductDescription component rendered.....' ));
-	    const color = store.getState( s => s.color );
-	    const type = store.getState( s => s.type );
-	    return (
-		    <div style={{ fontSize: 24 }}>
-			    <strong>Description:</strong> { color } { type }
-		    </div>
-	    );
-    });
-    ProductDescription.displayName = 'ProductDescription';
-    export default ProductDescription;
-
-<i><u>price-sticker.js</u></i>
-
-    import React, { memo, useEffect } from 'react';
-	import { useContext } from '@webkrafters/react-observable-context';
-	import ObservableContext from './context';
-	const CONTEXT_KEYS = [ 'price' ];
-    const PriceSticker = memo(() => {
-	    const { getState } = useContext( ObservableContext, CONTEXT_KEYS );
-	    useEffect(() => console.log( 'PriceSticker component rendered.....' ));
-	    return (
-		    <div style={{ fontSize: 36, fontWeight: 800 }}>
-			    ${ getState( s => s.price ).toFixed( 2 ) }
-		    </div>
-	    );
-    });
-    PriceSticker.displayName = 'PriceSticker';
-    export default PriceSticker;
-
-<i><u>product.js</u></i>
-
-    import React, { useCallback, useEffect, useState } from 'react';
-    import { Provider } from '@webkrafters/react-observable-context';
-	import ObservableContext from './context';
-    import Editor from './editor';
-    import PriceSticker from './price-sticker';
-    import ProductDescription from './product-description';
-    import TallyDisplay from './tally-display';
-    const Product = ({ prehooks = undefined, type }) => {
-	    const [ state, setState ] = useState(() => ({
-		    color: 'Burgundy',
-		    price: 22.5,
-		    type
-	    }));
-	    useEffect(() => {
-		    setState({ type }); // use this to update only the changed state
-		    // setState({ ...state, type }); // this will reset the context internal state
-	    }, [ type ]);
-	    const overridePricing = useCallback( e => setState({ price: Number( e.target.value ) }), [] );
-	    return (
-		    <div>
-			    <div style={{ marginBottom: 10 }}>
-				    <label>$ <input onKeyUp={ overridePricing } placeholder="override price here..."/></label>
-			    </div>
-				<Provider
-					context={ ObservableContext }
-					prehooks={ prehooks }
-					value={ state }
-				>
-				    <div style={{
-					    borderBottom: '1px solid #333',
-					    marginBottom: 10,
-					    paddingBottom: 5
-				    }}>
-					    <Editor />
-					    <TallyDisplay />
-				    </div>
-				    <ProductDescription />
-				    <PriceSticker />
-			    </Provider>
-		    </div>
-	    );
-    };
-    Product.displayName = 'Product';
-    export default Product;
-
-<i><u>app.js</u></i>
-
-    import React, { useCallback, useState } from 'react';
-    import Product from './product';
-	const prehooks = {
-		resetState: ( ...args ) => {
-			console.log( 'resetting state with >>>> ', JSON.stringify( args ) );
-			return true;
-		},
-		setState: ( ...args ) => {
-			console.log( 'setting state with >>>> ', JSON.stringify( args ) );
-			return true;
-		}
-	};
-    const App = () => {
-	    const [ productType, setProductType ] = useState( 'Calculator' );
-	    const updateType = useCallback( e => setProductType( e.target.value ), [] );
-	    return (
-		    <div className="App">
-			    <h1>Demo</h1>
-			    <h2>A contrived product app.</h2>
-			    <div style={{ marginBottom: 10 }}>
-				    <label>Type: <input onKeyUp={ updateType } placeholder="override product type here..." /></label>
-			    </div>
-			    <Product prehooks={ prehooks } type={ productType } />
-		    </div>
-	    );
-    };
-    App.displayName = 'App';
-    export default App;
-
-<i><u>index.js</i></b>
-
-    import React from 'react';
-    import ReactDOM from 'react-dom';
-    import App from './app';
-    ReactDOM.render(<App />, document.getElementById('root'));
-
-## License
-
-MIT
+# React-Observable-Context
+
+A context bearing an observable consumer store. State changes within the store's internal state are only broadcasted to components subscribed to the store. In this way, the `React-Observable-Context` prevents repeated automatic re-renderings of entire component trees resulting from ***context*** state changes.
+
+**React::memo** *(and PureComponents)* remain the go-to solution for the repeated automatic re-renderings of entire component trees resulting from ***component*** state changes. 
+
+_**Recommendation:**_ For optimum performance, consider wrapping in **React::memo** most components using this package's ***useContext*** function either directly or through another React hook. This will protect such components and their descendants from unrelated cascading render operations. ***Exempt:*** certain components such as those wrapped in the `React-Redux::connect()` HOC. Such HOC provide similar protection to wrapped components and their descendants. 
+
+<hr />
+
+<h4><u>Install</u></h4>
+
+npm i -S @webkrafters/react-observable-context
+
+npm install --save @webkrafters/react-observable-context
+
+## API
+
+The React-Observable-Context package exports **3** modules namely: the **createContext** method, the **useContext** hook and the **Provider** component.
+
+* **createContext** is a zero-parameter funtion returning a store-bearing context. Pass the context to the React::useContext() parameter to obtain the context's `store`.
+
+* **useContext** is analogous to React::useContext hook but returns the context store and takes a second parameter named ***watchedKeys***. The `watchedKeys` parameter is a list of state object property paths to watch. A change in any of the referenced properties automatically triggers a render of the component calling this hook.
+
+* **Provider** can immediately be used as-is anywhere the React-Observable-Context is required. It accepts **3** props and the customary Provider `children` prop. Supply the context to its `context` prop; the initial state to the customary Provider `value` prop; and the optional `prehooks` prop <i>(discussed in the prehooks section below)</i>.
+
+***<u>Note:</u>*** the Provider `context` prop is not updateable. Once set, all further updates to this prop are not recorded.
+
+### The Store
+
+The context's `store` exposes **4** methods for interacting with the context's internal state namely:
+
+* **getState**: (selector?: (state: State) => any) => any
+
+* **resetState**: VoidFunction // resets the state to the Provider initial `value` prop.
+
+* **setState**: (changes: PartialState\<State\>) => void // sets only new/changed top level properties.
+
+* **subscribe**: (listener: (newValue: PartialState\<State\>, oldValue: PartialState\<State\>) => void) => ***UnsubscribeFunction***
+
+### Prehooks
+
+The context's store update operation adheres to **2** user supplied prehooks when present. Otherwise, the update operation proceeds normally to completion. They are named **resetState** and **setState** after the store update methods which utilize them.
+
+* **resetState**: (state: {current: State, original: State}) => boolean
+
+* **setState**: (newChanges: PartialState\<State\>) => boolean
+
+***<u>Use case:</u>*** prehooks provide a central place for sanitizing, modifying, transforming, validating etc. all related incoming state updates. The prehook returns a **boolean** value (`true` to continue AND `false` to abort the update operation). The prehook may mutate (i.e. sanitize, transform, transpose) its argument values to accurately reflect the intended update value.
+
+## Usage
+
+<i><u>context.js</u></i>
+
+    import React from 'react';
+
+	import {
+		createContext,
+		Provider,
+		useContext
+	} from '@webkrafters/react-observable-context';
+	
+	export const ObservableContext = createContext();
+
+	export const ObservableContextProvider = ({ children, prehooks, value }) => (
+		<Provider
+			context={ ObservableContext }
+			prehooks={ prehooks }
+			value={ value }
+		>
+			{ children }
+		</Provider>
+	);
+	ObservableContextProvider.displayName = 'ObservableContextProvider';
+
+	export const useObservableContext = watchedKeys => useContext( ObservableContext, watchedKeys );
+
+	export default ObservableContext;
+
+<i><u>index.js</i></b>
+
+    import React from 'react';
+    import ReactDOM from 'react-dom';
+    import App from './app';
+    ReactDOM.render(<App />, document.getElementById('root'));
+
+<i><u>app.js</u></i>
+
+    import React, { useCallback, useState } from 'react';
+	import Product from './product';
+	const productUpdateHooks = {
+		resetState: ( ...args ) => {
+			console.log( 'resetting state with >>>> ', JSON.stringify( args ) );
+			return true;
+		},
+		setState: ( ...args ) => {
+			console.log( 'setting state with >>>> ', JSON.stringify( args ) );
+			return true;
+		}
+	};
+	const App = () => {
+		const [ productType, setProductType ] = useState( 'Calculator' );
+		const updateType = useCallback( e => setProductType( e.target.value ), [] );
+		return (
+			<div className="App">
+				<h1>Demo</h1>
+				<h2>A contrived product app.</h2>
+				<div style={{ marginBottom: 10 }}>
+					<label>Type: <input onKeyUp={ updateType } placeholder="override product type here..." /></label>
+				</div>
+				<Product
+					type={ productType }
+					updateHooks={ productUpdateHooks }
+				/>
+			</div>
+		);
+	};
+	App.displayName = 'App';
+	export default App;
+
+<i><u>product.js</u></i>
+
+	import React, { useCallback, useEffect, useState } from 'react';
+	import { ObservableContextProvider } from './context';
+	import Editor from './editor';
+	import PriceSticker from './price-sticker';
+	import ProductDescription from './product-description';
+	import TallyDisplay from './tally-display';
+	const Product = ({ type, updateHooks }) => {
+		const [ state, setState ] = useState(() => ({
+			color: 'Burgundy',
+			price: 22.5,
+			type
+		}));
+		useEffect(() => {
+			setState({ type }); // use this to update only the changed state value
+			// setState({ ...state, type }); // this will override the context internal state for these values 
+		}, [ type ]);
+		const overridePricing = useCallback( e => setState({ price: Number( e.target.value ) }), [] );
+		return (
+			<div>
+				<div style={{ marginBottom: 10 }}>
+					<label>$ <input onKeyUp={ overridePricing } placeholder="override price here..." /></label>
+				</div>
+				<ObservableContextProvider
+					prehooks={ updateHooks }
+					value={ state }
+				>
+					<div style={{
+						borderBottom: '1px solid #333',
+						marginBottom: 10,
+						paddingBottom: 5
+					}}>
+						<Editor />
+						<TallyDisplay />
+					</div>
+					<ProductDescription />
+					<PriceSticker />
+				</ObservableContextProvider>
+			</div>
+		);
+	};
+	Product.displayName = 'Product';
+	export default Product;
+
+<i><u>editor.js</u></i>
+
+    import React, { memo, useCallback, useEffect, useRef } from 'react';
+	import { useObservableContext } from './context';
+	const Editor = memo(() => {
+		const { setState } = useObservableContext();
+		const priceInputRef = useRef();
+		const colorInputRef = useRef();
+		const typeInputRef = useRef();
+		const updatePrice = useCallback(() => {
+			setState({ price: Number( priceInputRef.current.value ) });
+		}, []);
+		const updateColor = useCallback(() => {
+			setState({ color: colorInputRef.current.value });
+		}, []);
+		const updateType = useCallback(() => {
+			setState({ type: typeInputRef.current.value });
+		}, []);
+		useEffect(() => console.log( 'Editor component rendered.....' ));
+		return (
+			<fieldset style={{ margin: '10px 0' }}>
+				<legend>Editor</legend>
+				<div style={{ margin: '10px 0' }}>
+					<label>New Price: <input ref={ priceInputRef } /></label>
+					{ ' ' }
+					<button onClick={ updatePrice }>update price</button>
+				</div>
+				<div style={{ margin: '10px 0' }}>
+					<label>New Color: <input ref={ colorInputRef } /></label>
+					{ ' ' }
+					<button onClick={ updateColor }>update color</button>
+				</div>
+				<div style={{ margin: '10px 0' }}>
+					<label>New Type: <input ref={ typeInputRef } /></label>
+					{ ' ' }
+					<button onClick={ updateType }>update type</button>
+				</div>
+			</fieldset>
+		);
+	});
+	Editor.displayName = 'Editor';
+	export default Editor;
+
+<i><u>price-sticker.js</u></i>
+
+    import React, { memo, useEffect } from 'react';
+	import { useObservableContext } from './context';
+	const CONTEXT_KEYS = [ 'price' ];
+	const PriceSticker = memo(() => {
+		const { getState } = useObservableContext( CONTEXT_KEYS );
+		useEffect(() => console.log( 'PriceSticker component rendered.....' ));
+		return (
+			<div style={{ fontSize: 36, fontWeight: 800 }}>
+				${ getState( s => s.price ).toFixed( 2 ) }
+			</div>
+		);
+	});
+	PriceSticker.displayName = 'PriceSticker';
+	export default PriceSticker;
+
+<i><u>product-description.js</u></i>
+
+    import React, { memo, useEffect } from 'react';
+	import { useObservableContext } from './context';
+	const CONTEXT_KEYS = [ 'color', 'type' ];
+	const ProductDescription = memo(() => {
+		const store = useObservableContext( CONTEXT_KEYS );
+		useEffect(() => console.log( 'ProductDescription component rendered.....' ));
+		const color = store.getState( s => s.color );
+		const type = store.getState( s => s.type );
+		return (
+			<div style={{ fontSize: 24 }}>
+				<strong>Description:</strong> { color } { type }
+			</div>
+		);
+	});
+	ProductDescription.displayName = 'ProductDescription';
+	export default ProductDescription;
+
+<i><u>tally-display.js</u></i>
+
+    import React, { memo, useEffect } from 'react';
+	import { useObservableContext } from './context';
+	import Reset from './reset';
+	const CONTEXT_KEYS = [ 'color', 'price', 'type' ];
+	const TallyDisplay = memo(() => {
+		const { getState } = useObservableContext( CONTEXT_KEYS );
+		useEffect(() => console.log( 'TallyDisplay component rendered.....' ));
+		return (
+			<div>
+				<table>
+					<tbody>
+						<tr><td><label>Type:</label></td><td>{ getState( s => s.type ) }</td></tr>
+						<tr><td><label>Color:</label></td><td>{ getState( s => s.color ) }</td></tr>
+						<tr><td><label>Price:</label></td><td>{ getState( s => s.price ).toFixed( 2 ) }</td></tr>
+					</tbody>
+				</table>
+				<div style={{ textAlign: 'right' }}>
+					<Reset />
+				</div>
+			</div>
+		);
+	});
+	TallyDisplay.displayName = 'TallyDisplay';
+	export default TallyDisplay;
+
+<i><u>reset.js</u></i>
+
+    import React, { memo, useEffect } from 'react';
+	import { useObservableContext } from './context';
+	const Reset = memo(() => {
+		const { resetState } = useObservableContext();
+		useEffect(() => console.log( 'Reset component rendered.....' ));
+		return ( <button onClick={ resetState }>reset context</button> );
+	});
+	Reset.displayName = 'Reset';
+	export default Reset;
+
+
+## License
+
+MIT

package/dist/index.js

@@ -9,7 +9,8 @@ var _lodash = _interopRequireDefault(require("lodash.clonedeep"));
 var _lodash2 = _interopRequireDefault(require("lodash.has"));
 var _lodash3 = _interopRequireDefault(require("lodash.isempty"));
 var _lodash4 = _interopRequireDefault(require("lodash.isequal"));
-var _lodash5 = _interopRequireDefault(require("lodash.omit"));
+var _lodash5 = _interopRequireDefault(require("lodash.isplainobject"));
+var _lodash6 = _interopRequireDefault(require("lodash.omit"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -111,28 +112,59 @@ var useContext = function useContext(context) {
  */
 exports.useContext = useContext;
 var defaultPrehooks = Object.freeze({});
-
-/**
- * @param {T} state
- * @param {PartialState<T>} newState
- * @param {Listener<T>} onStateChange
- * @template {State} T
- */
-var _setState = function _setState(state, newState, onStateChange) {
-  /** @type {PartialState<T>} */
-  var newChanges = {};
-  /** @type {PartialState<T>} */
-  var replacedValue = {};
-  for (var k in newState) {
-    if (state[k] === newState[k]) {
-      continue;
+var _setState = function () {
+  var setAtomic = function setAtomic(state, newState, changed, replaced, stateKey) {
+    if ((0, _lodash4["default"])(state[stateKey], newState[stateKey])) {
+      return;
     }
-    replacedValue[k] = state[k];
-    state[k] = newState[k];
-    newChanges[k] = newState[k];
-  }
-  !(0, _lodash3["default"])(newChanges) && onStateChange(newChanges, replacedValue);
-};
+    var isArrayNewState = Array.isArray(newState[stateKey]);
+    if (Array.isArray(state[stateKey]) && isArrayNewState) {
+      return setArray(state, newState, changed, replaced, stateKey);
+    }
+    var isPlainObjectNewState = (0, _lodash5["default"])(newState[stateKey]);
+    if ((0, _lodash5["default"])(state[stateKey]) && isPlainObjectNewState) {
+      return setPlainObject(state, newState, changed, replaced, stateKey);
+    }
+    replaced[stateKey] = state[stateKey];
+    state[stateKey] = isArrayNewState || isPlainObjectNewState ? (0, _lodash["default"])(newState[stateKey]) : newState[stateKey];
+    changed[stateKey] = newState[stateKey];
+  };
+  var setArray = function setArray(state, newState, changed, replaced, rootKey) {
+    changed[rootKey] = {};
+    replaced[rootKey] = {};
+    for (var i = 0, len = newState[rootKey].length; i < len; i++) {
+      setAtomic(state[rootKey], newState[rootKey], changed[rootKey], replaced[rootKey], i);
+    }
+  };
+  var setPlainObject = function setPlainObject(state, newState, changed, replaced, rootKey) {
+    changed[rootKey] = {};
+    replaced[rootKey] = {};
+    for (var k in newState[rootKey]) {
+      setAtomic(state[rootKey], newState[rootKey], changed[rootKey], replaced[rootKey], k);
+    }
+  };
+  var set = function set(state, newState) {
+    var changed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var replaced = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    for (var k in newState) {
+      setAtomic(state, newState, changed, replaced, k);
+    }
+  };
+  /**
+   * @param {T} state
+   * @param {PartialState<T>} newState
+   * @param {Listener<T>} onStateChange
+   * @template {State} T
+   */
+  return function (state, newState, onStateChange) {
+    /** @type {PartialState<T>} */
+    var newChanges = {};
+    /** @type {PartialState<T>} */
+    var replacedValue = {};
+    set(state, newState, newChanges, replacedValue);
+    !(0, _lodash3["default"])(newChanges) && onStateChange(newChanges, replacedValue);
+  };
+}();
 
 /**
  * @param {Prehooks<T>} prehooks
@@ -150,7 +182,7 @@ var usePrehooksRef = function usePrehooksRef(prehooks) {
 var ChildMemo = function () {
   var useNodeMemo = function useNodeMemo(node) {
     var nodeRef = (0, _react.useRef)(node);
-    if (!(0, _lodash4["default"])((0, _lodash5["default"])(nodeRef.current, '_owner'), (0, _lodash5["default"])(node, '_owner'))) {
+    if (!(0, _lodash4["default"])((0, _lodash6["default"])(nodeRef.current, '_owner'), (0, _lodash6["default"])(node, '_owner'))) {
       nodeRef.current = node;
     }
     return nodeRef.current;
@@ -178,7 +210,7 @@ var memoizeImmediateChildTree = function memoizeImmediateChildTree(children) {
       return child;
     }
     if ((_child$props = child.props) !== null && _child$props !== void 0 && _child$props.children) {
-      child = /*#__PURE__*/(0, _react.cloneElement)(child, (0, _lodash5["default"])(child.props, 'children'), memoizeImmediateChildTree(child.props.children));
+      child = /*#__PURE__*/(0, _react.cloneElement)(child, (0, _lodash6["default"])(child.props, 'children'), memoizeImmediateChildTree(child.props.children));
     }
     return /*#__PURE__*/_react["default"].createElement(ChildMemo, {
       child: child
@@ -252,7 +284,8 @@ var Provider = function Provider(_ref4) {
   /** @type {Store<T>["getState"]} */
   var getState = (0, _react.useCallback)(function () {
     var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSelector;
-    return selector(state);
+    var slice = selector(state);
+    return _typeof(slice) === 'object' ? (0, _lodash["default"])(slice) : slice;
   }, []);
 
   /** @type {Store<T>["resetState"]} */

package/package.json

@@ -12,6 +12,7 @@
     "lodash.has": "^4.5.2",
     "lodash.isempty": "^4.4.0",
     "lodash.isequal": "^4.5.0",
+    "lodash.isplainobject": "^4.0.6",
     "lodash.omit": "^4.5.0",
     "react": "^18.2.0"
   },
@@ -78,5 +79,5 @@
     "test:watch": "eslint --fix && jest --updateSnapshot --watchAll"
   },
   "types": "dist/index.d.ts",
-  "version": "2.1.2"
+  "version": "2.1.4-rc.0"
 }