Блог

У меня проблема с Mobx в моем проекте. Изменение свойства в моем хранилище с помощью действия не запускает компонент перезапуска. Я аннотировал @action поле @observer и компонент с помощью HoC observer .

Я выполнил минимальную настройку, чтобы представить проблему в StackBlizt: https://stackblitz.com/edit/react-ts-dwqnm5?file=TestComponent.tsx

После нажатия кнопки токен должен измениться.

Index.tsx

 function App() {
  return (
    <StoreProvider store={new UserStore()}>
      <div>
        <h1>Hello REACT!</h1>
        <TestComponent />
      </div>
    </StoreProvider>
  );
}

render(<App />, document.getElementById("root"));
  

StoreContext.tsx

 export const StoreContext = createContext<UserStore>({} as UserStore);

export type StoreComponent = FC<{
  store: UserStore;
  children: ReactNode;
}>;

export const StoreProvider: StoreComponent = ({
  children,
  store
}): ReactElement => {
  return (
    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
  );
};
  

UserStore.ts

 export default class UserStore {
  @observable
  public authToken: string = "null";

  @action
  changeAuth = (auth: string) => {
    this.authToken = auth;
  };
}
  

TestComponent.tsx

 function TestComponent() {
  const { changeAuth, authToken } = useContext(StoreContext);

  const handleClick = () => {
    changeAuth("TEST AUTH");
  };

  return (
    <div>
      <button onClick={handleClick}>Click to change Token in store</button>
      <br />
      Token: {authToken}
      <br />
    </div>
  );
}

export default observer(TestComponent);
  

Чего я не заметил?

Если вы использовали MobX 6, то теперь вам нужно использовать makeObservable метод внутри конструктора для достижения той же функциональности с декораторами, что и с MobX 5 раньше:

 import { makeObservable } from "mobx"

export default class UserStore {
  @observable
  public authToken: string = "null";

  @action
  changeAuth = (auth: string) => {
    this.authToken = auth;
  };

  constructor() {
    // Just call it here
    makeObservable(this);
  }
}
  

Хотя есть новая вещь, которая, вероятно, позволит вам полностью отказаться от декораторов, makeAutoObservable :

 import { makeAutoObservable } from "mobx"

export default class UserStore {
  // Don't need decorators now
  public authToken: string = "null";

  // Don't need decorators now
  changeAuth = (auth: string) => {
    this.authToken = auth;
  };

  constructor() {
    // Just call it here
    makeAutoObservable(this);
  }
}
  

Дополнительная информация здесь
https://mobx.js.org/migrating-from-4-or-5.html и https://mobx.js.org/react-integration.html