Состояние Mobx теряется, когда другие компоненты React получают доступ к хранилищу - PullRequest
Новая
       10

Состояние Mobx теряется, когда другие компоненты React получают доступ к хранилищу

0 голосов
/ 19 апреля 2020

Я пытаюсь научиться использовать mobx с React Hooks. Но я не понимаю, почему, когда один компонент загружает данные хранилища (используя loadData ()), я могу наблюдать обновленные значения из хранилища, но когда другой компонент получает доступ к данным хранилища, все сбрасывается в данных хранилища обратно к его значения по умолчанию. Что мне здесь не хватает?

Моя платформа разработки использует Nodejs v12.16.1

Мои зависимости React:

"mobx": "^ 5.15.4", "mobx-реаги- lite ":" ^ 1.5.2 "," реагировать ":" ^ 16.13.1 ", 

import { createContext } from 'react';
import { observable, action, decorate, flow } from "mobx";
import agent from '../api/agent'; 

import { history } from "../index";

class ApplicationStore {
    user = {
      profile: { id: null, firstName: null, lastName: null, email: null, phoneNumber: null }
    };
    loading = false;

    loadData = flow(function *() {
      this.loading = true;
      try {
        const payload = yield agent.User.get('defaultUser');
        this.user.profile.id = payload.user.profile.id;
        this.user.profile.firstName = payload.user.profile.firstName;
        this.user.profile.lastName = payload.user.profile.lastName;
        this.user.profile.email = payload.user.profile.email;
        this.user.profile.phoneNumber = payload.user.profile.phoneNumber;
      } catch (err) {
        console.log(err);
        history.push('/systemDown');
      } finally {
        this.loading = false;
      }
    });
}

decorate(ApplicationStore, {
    user: observable,
    loading: observable,
    //loadData: action, //Defining as an action or not makes no difference
})

export default createContext(new ApplicationStore());  //NOTE: Creating context here.

const HomePage = observer(() => {
  const applicationStore = useContext(ApplicationStore);

  useEffect(() => {
    applicationStore.loadData();
  }, [applicationStore]);

  if (applicationStore.loading)
    return <LoadingComponent content="Loading data..." />;

  return (<DoSomething/>)
})

const DoSomething = observer(() => {
   const applicationStore = useContext(ApplicationStore);

   return (<div>
     // ERROR: applicationStore.user.profile is back to its default values.  Why???
   </div>)
})

1 Ответ

0 голосов
/ 19 апреля 2020

Я только заметил одну вещь. Вы забыли украсить свои компоненты с помощью observer. 

//   -------------- ? IMPORTANT! ----------------
const DoSomething = observer(() => {...})

Вот коды и коробка для иллюстрации:

Edit hardcore-hooks-4cdrp

...