docs(store): improve onChange and effects examples & add more detail

Author: DawidWraga

apps/docs/pages/store/onChange-and-effects.mdx

@@ -48,9 +48,17 @@ const unsubscribe = userStore.name.onChange(console.log);
 Specify `deps` to react only to certain state parts. It can be a keys array or a function returning dependencies.
 
 ```tsx
-const unsubscribe = store.onChange(callback, { deps: ['num'] });
+const unsubscribe = store.onChange(callback, { deps: ['name '] });
 ```
 
+```tsx
+const unsubscribe = store.onChange(callback, {
+	deps: (state) => [state.name],
+});
+```
+
+You can subscribe to deeply nested changes inside the deps callback eg `state => [state.user.address.street]`
+
 #### Immediate Invocation
 
 Use `fireImmediately` to trigger the callback immediately with the current state.
@@ -107,3 +115,27 @@ countStore.unsubscribeFromEffects();
 ```
 
 These methods are used under the hood of `createStoreContext` to make multiple instances of the store work correctly.
+
+Here is a super simplified version of `createStoreContext` to show how the effects are unsubscribed from when the component is unmounted
+
+```tsx
+export function createStoreContext(store) {
+	const Provider = () => {
+		const storeInstance = React.useRef(store.create(localInitialValue));
+
+		React.useEffect(() => {
+			return () => {
+				storeInstance.current.unsubscribeFromEffects();
+			};
+		}, []);
+
+		return (
+			<Context.Provider value={storeInstance.current}>
+				{children}
+			</Context.Provider>
+		);
+	};
+}
+```
+
+

packages/store/README.md

@@ -50,23 +50,24 @@ function Controls() {
 const counterStore: StoreApi<number, {}>;
 ```
 
-### Example with computed properties and actions
+### Advanced example
 
 ```tsx
 import { store } from '@davstack/store';
 
 const counterStore = store()
 	.state({ count: 0 })
-	.computed((store) => ({
-		doubleCount: () => store.count.use() * 2,
-	}))
 	.actions((store) => ({
 		increment: () => store.count.set(store.count.get() + 1),
 		decrement: () => store.count.set(store.count.get() - 1),
+	}))
+	.computed((store) => ({
+		doubleCount: () => store.count.use() * 2,
+	}))
+	.effects((store) => ({
+		logChanges: () => store.onChange(console.log),
 	}));
 
-counterStore.onChange(console.log);
-
 function Counter() {
 	const count = counterStore.count.use();
 	return <div>Count: {count}</div>;
@@ -84,13 +85,16 @@ function Controls() {
 // Generated types
 const counterStore: StoreApi<
 	{ count: number },
-	ComputedMethods<{
-		doubleCount: () => number;
-	}> & {
+	{
 		increment: () => void;
 		decrement: () => void;
-	}
+	} & ComputedMethods<{
+		doubleCount: () => number;
+	}> & EffectMethods<{
+		logChanges: () => UnsubscribeFn;
+	}>;
 >;
+
 ```
 
 Note: store(initialValue) and store.state(initialValue) are equivalent, it's just a matter of preference.
@@ -155,3 +159,4 @@ Contributions are welcome! Please read our [contributing guide](link-to-contribu
 ### License
 
 This project is licensed under the [MIT License](link-to-license). See the LICENSE file for details.
+