Tips and tricks

[finom]

Since use-change is completely different thing we've ever used, I'm going to collect there tips, tricks, ideas and patterns that going to show how to solve common problems.

Access store from dev tools

There is the first one. Add the following snippet of code to access store while you at development env:

// ...
const store = new RootStore();
if (typeof window !== 'undefined' && env.NODE_ENV === 'development') {
  (window as unknown as { store: RootStore }).store = store;
}
export default store;

• typeof window !== 'undefined' checks if it's a browser environment (useful for hybrid frameworks like NextJS).
• window as unknown as { store: Store } allows to skip global definitions.

After that you can access store as a global variable called store.

How to make code nicer and avoid duplicating store selectors

Let's say you have a big component that uses a lot of properties implemented by use-change. At this case you need to pass store selector every time which makes code to look messy. There is a snippet from a real project that demonstrates the problem:

// ./MyComponent.tsx
...
const MyComponent = (): ReactElement => {
  const candles = useValue(({ market }: RootStore) => market, 'candles');
  const currentSymbolInfo = useValue(({ market }: RootStore) => market, 'currentSymbolInfo');
  const symbol = useValue(({ persistent }: RootStore) => persistent, 'symbol');
  const [interval, setCandleInterval] = useChange(({ persistent }: RootStore) => persistent, 'interval');
  const [alerts, setAlerts] = useChange(({ persistent }: RootStore) => persistent, 'alerts');
  const tradingType = useValue(({ persistent }: RootStore) => persistent, 'tradingType');
  const openOrders = useValue(({ trading }: RootStore) => trading, 'openOrders');
  const updateDrafts = useSilent(({ trading }: RootStore) => trading, 'updateDrafts');
  const limitBuyPrice = useValue(({ trading }: RootStore) => trading, 'limitBuyPrice');
  const limitSellPrice = useValue(({ trading }: RootStore) => trading, 'limitSellPrice');
  const stopBuyPrice = useValue(({ trading }: RootStore) => trading, 'stopBuyPrice');
  const stopSellPrice = useValue(({ trading }: RootStore) => trading, 'stopSellPrice');
  const shouldShowLimitBuyPriceLine = useValue(({ trading }: RootStore) => trading, 'shouldShowLimitBuyPriceLine');
  const shouldShowLimitSellPriceLine = useValue(({ trading }: RootStore) => trading, 'shouldShowLimitSellPriceLine');
  const shouldShowStopBuyPriceLine = useValue(({ trading }: RootStore) => trading, 'shouldShowStopBuyPriceLine');
  const shouldShowStopSellPriceLine = useValue(({ trading }: RootStore) => trading, 'shouldShowStopSellPriceLine');
...

As a solution define and export store selector constants and then replace store selectors by those constants.

// ./store.ts
...
export const TRADING = ({ trading }: RootStore) => trading;
export const PERSISTENT = ({ persistent }: RootStore) => persistent;
export const MARKET = ({ market }: RootStore) => market;

// ./MyComponent.tsx
import { TRADING, PERSISTENT, MARKET } from './store';

const MyComponent = (): ReactElement => {
  const candles = useValue(MARKET, 'candles');
  const currentSymbolInfo = useValue(MARKET, 'currentSymbolInfo');
  const symbol = useValue(PERSISTENT, 'symbol');
  const [interval, setCandleInterval] = useChange(PERSISTENT, 'interval');
  const [alerts, setAlerts] = useChange(PERSISTENT, 'alerts');
  const tradingType = useValue(PERSISTENT, 'tradingType');
  const openOrders = useValue(TRADING, 'openOrders');
  const updateDrafts = useSilent(TRADING, 'updateDrafts');
  const limitBuyPrice = useValue(TRADING, 'limitBuyPrice');
  const limitSellPrice = useValue(TRADING, 'limitSellPrice');
  const stopBuyPrice = useValue(TRADING, 'stopBuyPrice');
  const stopSellPrice = useValue(TRADING, 'stopSellPrice');
  const shouldShowLimitBuyPriceLine = useValue(TRADING, 'shouldShowLimitBuyPriceLine');
  const shouldShowLimitSellPriceLine = useValue(TRADING, 'shouldShowLimitSellPriceLine');
  const shouldShowStopBuyPriceLine = useValue(TRADING, 'shouldShowStopBuyPriceLine');
  const shouldShowStopSellPriceLine = useValue(TRADING, 'shouldShowStopSellPriceLine');

At this case you still don't export/import modifiable store object and you get code look much readable.