ReactJS 和 Mobx RootStore 以及子商店变得未定义

Question

我正在尝试创建一个包含两个商店 currentUser 和 AuthUser 的 rootStore，我创建了一个上下文，并尝试将它与 useContext 一起使用，但由于某种原因没有成功

RootStore 和 rootStore 上下文：

export class RootStore {
  @observable appName = 'Emasa';
  @observable appLoaded = false;
  userStore: UserStore;
  authStore: AuthStore;
  constructor() {
    this.userStore = new UserStore(this);
    this.authStore = new AuthStore(this);
  }
  @action setAppLoaded(): void {
    this.appLoaded = true;
  }
}
export const RootStoreContext = createContext(new RootStore())

当前用户存储：

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

和authStore：

const Cookie = new CookieUniversal()
export class AuthStore extends BaseAPI {
  @observable token = Cookie.get('Access-Token')
  @observable isAuth = false
  @observable inProgress = false
  @observable errors = undefined
  constructor(rootStore: RootStore) {
    super(rootStore)
    reaction(
      () => this.isAuth,
      (value) => {
        if (!value) return this.remove()
        if (value && !verify(this.token, apiSecret)) return this.remove()
      }
    )
  }
  @action async login(login: string, password: string): Promise<UserModel> {
    this.inProgress = true
    this.errors = undefined
    try {
      const response: UserModel = await this.post('/login', {
        login,
        password,
      }).then(() => this.rootStore.userStore.pullUser())
      if(response instanceof UserModel) this.isAuth = true;
      return response
    } catch (error) {
      this.errors = error.response && error.response.body && error.response.body.errors
      throw error
    }
  }
  @action logout(): Promise<void> {
    this.remove()
    return Promise.resolve()
  }
  @action remove(): void {
    Cookie.remove('Access-Token')
    this.rootStore.userStore.currentUser = null
  }
}

jsx：

const App: React.FunctionComponent = () => {
  const { theme } = useAppTheme();
  const { authStore, userStore } = useContext(RootStoreContext);
  useEffect(() => {
    async function start() {
      await userStore.pullUser();
    }
    start();
  }, []);
  console.log(userStore.currentUser, "user");
  console.log(authStore.isAuth, "isAuth");
  return (
    <ThemeProvider theme={theme}>
      <a>{authStore.isAuth}</a>
    </ThemeProvider>
  );
};

我无法解决这个问题，由于某种原因，在打开页面时，我使我的请求正确地使令牌有效，但似乎我的商店不起作用我总是将当前用户视为 udnefined 和我的isAuth 为假，我找不到 MOBX 的错误或反应

如果有人可以帮助我，我很感激

Answer 1

您必须使用 <RootStoreContext.Provider /> 包装您的应用程序并提供 RootStore 实例作为初始值。

查看useContext doc 获取使用 Context 和钩子的示例