@wertyga/wx v3.3.1

npm install --save @wertyga/wx

import { getOrInitialStores, useStores } from '@wertyga/wx';

const stores = {
	UserStore,
};

const options = {
	initialState: {
		userStore: {
			username: 'Frank Sinatra', 
            age: 51,
		},
	},
	fetchClient: ApolloClient(),
};

type RootStore = {
	userStore: UserStore,
}
export const ChildComponent = () => {
	const { userStore } = useStores<RootStore>('userStore');
	return (
		<div>
			<span>Singers...</span>
			<span>{userStore.username}</span>
		</div>
	);
};

// To make re-render component only if was changed particular properties of store
// You can pass an array of dependencies (propperties of store)
export const ChildComponent = () => {
	// Component will never do re-render if userStore.username was changed
	const { userStore } = useStores<RootStore, RootStore['userStore']>('userStore', ['age']);
	return (
		<div>
			<span>Singers...</span>
			<span>{userStore.username}</span>
			<span>{userStore.age}</span>
		</div>
	);
};
// Or you can pass "false" to make no react of store changing
export const ChildComponent = () => {
	// Component will never do re-render if any propperty of userStore was changed
	const { userStore } = useStores<RootStore>('userStore', false);
	return (
		<div>
			<span>Singers...</span>
			<span>{userStore.username}</span>
			<span>{userStore.age}</span>
		</div>
	);
};

export const SomeComponent = () => {
	getOrInitialStores(stores, options);
	return (
		<div>
			...Some logic here
		</div>
	);
};

import { RootState, observe } from '@wertyga/wx';

type ProductStoreType = RootState<RootStore, ApolloClient<any>>;

class UserStore {
    fetch: ProductStoreType['fetch'];
    rootStore: ProductStoreType['rootStore'];
    @observe('defaultValue') username: string // This prop will be reactive in your React component
    
    ...Some class impliment
}