Mobx-react-lite + React-hooks + typescript was used for the first time in a new project. “First of all, you can choose Redux and MOBx for state management. Redux has been used in many projects before, but every time it was difficult to build, then I saw some MOBx, and I really felt it was faster.” (bs)

The traditional React data management library is Redux. Redux addresses the problem of unified data flow, which is completely controllable and traceable. To achieve this goal, constraints are required. Redux thus derived concepts such as Dispatch action Reducer, which strongly constrained the concept of state. However, for some projects, it is too strong, and flexibility is lost. Mobx is here to fill the gap.

Here’s a quick comparison between Redux and Mobx:

  1. Redux’s programming paradigm is functional while Mobx is object-oriented;
  2. So Redux is ideally immutable in terms of data, returning a new data every time, whereas Mobx is a reference from start to finish. So Redux supports data backtracking;
  3. Compared to Redux, however, Mobx components can be updated precisely, thanks to Mobx Observables; In contrast, Redux uses dispath to broadcast, uses Provider and connect to compare the difference before and after to control the granularity of update, and sometimes needs to write SCU by itself. Mobx is a little more sophisticated.

Mobx core conceptsThe core principle of Mobx is to trigger changes in State through action, which in turn triggers state-derived objects (computed Value & Reactions).

Dev /docs/ Adding typescript: create react app — adding typescript dev/docs/ Adding… NPX create-react-app my-app –template typescript 2, Add typescript YARN add typescript @types/ node@types/reacte@types /react-dom @types/jest

Mobx-react yarn add mobx mobx-react mobx-react-lite –save

Create a store folder under SRC, then create index. TSX and counterstore. TSX, add counterStore. TSX:

import { useLocalObservable } from "mobx-react-lite"; export const initialValues = { value: 0,}; type IpropInit = { value: number }; export interface CounterProps extends IpropInit { increment: () => void; decrement: () => void; } const GlobalData = () => { const store = useLocalObservable<CounterProps>(() => ({ /*observables*/ ... initialValues, increment() { store.value += 1; }, decrement() { store.value -= 1; }})); return store; }; export default GlobalData;Copy the code

store/index.tsx:

import React, { createContext, FC } from "react"; import useCounterContext, { CounterProps } from "./counterStore"; export interface RootStoreSchema { counterStore: CounterProps; } // @ts-ignore // @todo Export const RootStoreContext = createContext<RootStoreSchema>(null); const RootStore: FC = ({ children }) => { const counterContext = useCounterContext(); return ( <RootStoreContext.Provider value={{ counterStore: counterContext }} > {children} </RootStoreContext.Provider> ); }; export default RootStore;Copy the code

Then create a counter component SRC/counter.tsx

import React, { FC, useContext } from "react";
import { observer } from 'mobx-react-lite';
import { RootStoreContext } from './store/index';
interface IProps {};
const Counter:FC<IProps> = (props) => {
    const store = useContext(RootStoreContext);
    return <div>
        <div>{store.counterStore.value}</div>
        <button onClick={ () => store.counterStore.increment() }>increment</button>
        <button onClick={ () => store.counterStore.decrement() }>decrement</button>
    </div>};
export default observer(Counter);
Copy the code

Introduce Counter in app.tsx

import React, { FC } from "react";
import RootStore from "./store/index";
import Counter from "./Counter"interface IProps {};
const App:FC<IProps> = (props) => {
  return (<RootStore>
    <Counter /></RootStore>
)};
export default App;
Copy the code

Ok, that’s it:

Reference: blog.csdn.net/weixin\_443…