Mobx-React: Rootstore with child stores and async validation at init

[sptGabriel]

Hello I have a problem getting a property value from a store in my rootStore, and showing the value in jsx.
the logic:
When I start I check if there is a cookie, if it exists I do a fetching with my api to load the current user.

I created a sandbox to simulate and esotu with the same problem with async:
https://codesandbox.io/s/hungry-buck-jrkte?file=/src/App.tsx

Provider:

let store: RootStore;
const StoreContext = createContext<RootStore | null>(null);
export const RootStoreProvider = ({
  children
}: {
  children: ReactNode;
}): JSX.Element => {
  const root = store ?? new RootStore();
  return <StoreContext.Provider value={root}>{children}</StoreContext.Provider>;
};
export const useRootStore = (): RootStore => {
  const context = useContext(StoreContext);
  if (context === null) {
    throw new Error('useRootStore must be used within RootStoreProvider');
  }
  return context;
};
ReactDOM.render(
  <React.StrictMode>
    <RootStoreProvider>
      <App />
    </RootStoreProvider>
  </React.StrictMode>,
  document.getElementById('emasa')
);

RootStore:

export class RootStore {
  userStore: UserStore;
  authStore: AuthStore;
  cookieStore: CookieStore;
  constructor() {
    this.cookieStore = new CookieStore(this);
    this.userStore = new UserStore(this);
    this.authStore = new AuthStore(this);
  }
}

CurrentUserStore: // here i check cookie and getUser from my api

export class UserStore extends BaseAPI {
  @observable currentUser: UserModel | null = null;
  @observable loadingUser = false;
  constructor(rootStore: RootStore) {
    super(rootStore);
    if (rootStore.cookieStore.getAccessToken()) {
      (async () => this.pullUser())();
    }
  }
  @action pullUser = async (): Promise<void> => {
    this.loadingUser = true;
    try {
      await this.get('/users/me', {
        Cookie: `Access-Token=${this.rootStore.cookieStore.getAccessToken()};`
      }).then(
        action('fetchSuccess', ({ data }: any) => {
          const model = new UserModel(data);
          if (model) this.currentUser = model;
          this.loadingUser = false;
        }),
        action('fetchError', (error: Error) => {
          throw error;
        })
      );
    } catch (error) {
      runInAction(() => {
        this.loadingUser = false;
        this.currentUser = null;
        this.rootStore.authStore.isAuth = false;
      });
      throw error;
    }
  };
}

AuthStore: // Here I need to hear my currentUser, to make isAuth false or true

export class AuthStore extends BaseAPI {
  @observable isAuth = false;

  @observable inProgress = false;

  @observable errors = undefined;

  constructor(rootStore: RootStore) {
    super(rootStore);
    if (
      rootStore.userStore.currentUser &&
      rootStore.cookieStore.getAccessToken()
    )
      console.log('a');
    this.isAuth = true;
  }
}

on componentwillmount:

sorry if it's not the right place to ask, but i've tried everything, i followed the tutorial, but without success

[danielkcz]

Make sure you read the migration guide closely. Just glancing I don't see makeObservable in your store constructor.

[sptGabriel]

Make sure you read the migration guide closely. Just glancing I don't see makeObservable in your store constructor.

Hello I was successful refactoring the code, but I was left with a question regarding:
makeAutoObservable (this, {rootStore: false})

class RootStore {
    constructor() {
        this.userStore = new UserStore(this)
        this.todoStore = new TodoStore(this)
    }
}

class UserStore {
    constructor(rootStore) {
        this.rootStore = rootStore
    }

    getTodos(user) {
        // Access todoStore through the root store.
        return this.rootStore.todoStore.todos.filter(todo => todo.author === user)
    }
}

class TodoStore {
    todos = []
    rootStore

    constructor(rootStore) {
        makeAutoObservable(this, { rootStore: false })
        this.rootStore = rootStore
    }
}

I don't know if I'm correct, but it doesn't have the observable because it doesn't have any properties in the rootStore, and in the userStore, but I didn't understand the reason for leaving the rootStore with false in this useCase

[sptGabriel]

And if you can help me with one more question, every time I enter the page I get my user, (the current user logged in) from my api, but I wanted that every time my currentUser suffered a change, I wanted modify the value of my isAuth in another store, the most correct for that would be the reaction?

[danielkcz]

You need to provide a code (ideally a runnable example) for any help. We can't make an assumption about how is your code structured.