Mobx-react-lite is a lightweight version of Mobx-React, with hooks support added

Is a tool for managing state

Usage Guide (1) :

Here is how to use mobx-React-Lite + useContext

To use:

  • Mobx – react – liteuseObserver
  • The mobxobservable.action.computed. makeObservable
  • The react ofcreateContext.useContext

1. Create the store

// store.ts import { observable, action, computed, makeObservable } from 'mobx'; Export class CounterStore {constructor() {makeObservable(this); } @observable count = 0; @action increase() { this.count = this.count + 1; } @action decrease() { this.count = this.count - 1; } @computed get doubleCount() { return this.count * 2; }}Copy the code

Tips: Data is updated, try not to update it, add it to store and try

MakeObservable (this) {constructor() {// makeObservable(this); }Copy the code

2. To create a context

Create a storeContext and export it, and the descendant component gets the instance object of each store in the storeContext when useContext is used.

// context.ts import { createContext } from 'react'; import { CounterStore } from '.'; // Create storeContext with createContext export const storeContext = createContext({counterStore: // new aStore:new aStore () //.... });Copy the code

3. Create useStore

Use useStores to get the initial value object given by React. CreateContext (if you are not using the StoresContext.Provider component, if you are, The storesContext. Provider value property is retrieved.)

// useStore.ts
import React, { useContext } from 'react';
import { storeContext } from './contexts';
export const useStore = () => useContext(storeContext);
Copy the code

4. Used in components

The descendant component calls useStore to get the store instance object, so it can get the data in the store and change the state by calling the Action in the store.

The component is listened on with useObserver, and its status is updated to the component.

// MobxDemo.tsx import { useStore } from '.. /.. /store/useStore'; import Demo1 from './components/Demo1'; import { useObserver } from 'mobx-react-lite'; function MobxDemo() { const store = useStore(); const { counterStore } = store; const handleIncrease = () => { counterStore.increase(); }; const handleDecrease = () => { counterStore.decrease(); }; return useObserver(() => ( <div> <p>count:{counterStore.count}</p> <button onClick={handleIncrease}>add</button> <button  onClick={handleDecrease}>minus</button> <p>doubleCount:{counterStore.doubleCount}</p> <Demo1 count={counterStore.count}  /> </div> )); } export default MobxDemo;Copy the code

In addition to this usage, mobx-React-Lite has several other apis: useLocalStore, Observer, etc

Usage Guide (2) :

  • To usemobx-react-lite 的 useLocalStore,observer
  • react 的 createContext,useContext

1. Create the store

// Store. Ts export const createStore = () => {const store = {cities: Get allCities() {return this. Cities}, addCity(city: string) { this.cities.push(city) } } return store } export default createStore export type TStore = ReturnType<typeof createStore>Copy the code

2. To create a context

// context.ts
import { useLocalStore } from 'mobx-react-lite';
import { createContext } from 'react';
import createStore, { TStore } from './sotre';

export const CityContext = createContext<TStore | null>(null);

const StoreProvider = ({ children }: any) => {
  const store = useLocalStore(createStore);

  return <CityContext.Provider value={store}>{children}</CityContext.Provider>;
};

export default StoreProvider;
Copy the code

Use 3.

// App.tsx
import StoreProvider from './mobxStore/context';
import City from './City';
export default function App() {
  return (
    <StoreProvider>
      <div>
        <City />
      </div>
    </StoreProvider>
  );
}
Copy the code

4. Use subcomponents

// City.tsx import { useContext } from 'react'; import { observer } from 'mobx-react-lite'; import { CityContext } from './mobxStore/context'; function City() { const store = useContext(CityContext); const handleAddCity = () => { store? AddCity (' guangzhou); }; return ( <div> <p className="city">cities:{store? .allcities.join (',')}</p> < handleAddCity}> Add city</button> </div>); } export default observer(City);Copy the code