refactor: 重构mobx

src/store/index.ts

-import RootStore from './rootStore';
+import { makeAutoObservable } from 'mobx';
+import { UserStore } from './userStore';
 
-const rootStore = new RootStore();
-/**
- * 这里只做根Store的导出
- * 预留以后可能会出现 额外的Store
- */
-const Store = {
-  ...rootStore,
-};
+export class Store {
+  userStore: UserStore = new UserStore();
 
-export default Store;
+  constructor() {
+    makeAutoObservable(this);
+  }
+}

src/store/rootStore/index.ts

-import { makeAutoObservable } from 'mobx';
-import UserStore from '../userStore';
-import { UserStoreModel } from '../userStore/model';
-
-class RootStore {
-  userStore: UserStoreModel;
-
-  constructor() {
-    makeAutoObservable(this);
-    this.userStore = new UserStore(this);
-  }
-}
-
-export default RootStore;

src/store/rootStore/model.ts

-import { UserStoreModel } from '../userStore/model';
-
-export interface RootStoreModel {
-  userStore: UserStoreModel;
-}

src/store/useStores.tsx

-import React, {
-  FC,
-  createContext,
-  ReactNode,
-  ReactElement,
-  useContext,
-} from 'react';
-import { RootStoreModel } from './rootStore/model';
+import React, { createContext, useContext } from 'react';
+import { Store } from '.';
 
-export const StoreContext = createContext<RootStoreModel>({} as RootStoreModel);
+const StoreContext = createContext<Store>(new Store());
 
-export type StoreComponent = FC<{
-  store: RootStoreModel;
-  children: ReactNode;
-}>;
+const store = new Store();
 
-// eslint-disable-next-line react/prop-types
-export const StoreProvider: StoreComponent = ({
-  children,
-  store,
-}): ReactElement => (
-  <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
-);
+const StoreProvider = () => {
+  return <StoreContext.Provider value={store}></StoreContext.Provider>;
+};
 
-/**
- * 组件具体使用mobx的hooks
- */
-export const useStores = (): RootStoreModel => useContext(StoreContext);
-
-export default useStores;
+export const useStores = () => useContext(StoreContext);

src/store/userStore/index.ts

-import { makeObservable, observable, runInAction } from 'mobx';
-import {
-  getAsyncStorage,
-  setAsyncStorage,
-  removeAsyncStorage,
-} from '../../utils/storage';
-import { USER_INFO, TOKEN } from '../../constants';
-import { RootStoreModel } from '../rootStore/model';
-import { UserStoreModel, userInfoType } from './model';
-
-export default class UserStore implements UserStoreModel {
-  private rootStore: RootStoreModel;
-
-  username = 'Bob';
-
-  userInfo: userInfoType | null = null;
-
-  constructor(rootStore: RootStoreModel) {
-    makeObservable(this, {
-      username: observable,
-      userInfo: observable,
-    });
-    this.rootStore = rootStore;
-    this.fetchUserInfo();
-  }
-
-  setUserName(name: string) {
-    this.username = name;
-  }
-
-  async fetchUserInfo() {
-    this.userInfo = await getAsyncStorage(USER_INFO);
-  }
-
-  // 用户登录时，或者修改用户信息的时候更新UserInfo
-  async setUserInfo(data: userInfoType) {
-    await setAsyncStorage(USER_INFO, data);
-    runInAction(() => {
-      this.userInfo = data;
-    });
-  }
-
-  async removeUserInfo() {
-    await removeAsyncStorage(TOKEN);
-    await removeAsyncStorage(USER_INFO);
-    // 商品分享口令生成数字
-    await removeAsyncStorage('SHARE_CODE_NUM');
-    runInAction(() => {
-      this.userInfo = null;
-    });
-  }
-}
+export * from './userStore';
+export * from './types';

src/store/userStore/model.ts → src/store/userStore/types.ts

-export type userInfoType = {
+export interface UserInfo {
   account?: string;
   company?: string;
   countryCode?: string;
@@ -20,12 +20,4 @@ export type userInfoType = {
     roleId: number;
     roleName: string;
   }[];
-};
-
-export interface UserStoreModel {
-  username: string;
-  setUserName: (name: string) => void;
-  userInfo: null | userInfoType;
-  removeUserInfo: () => void;
-  setUserInfo: (data: any) => void;
 }

src/store/userStore/userStore.ts

+import { makeObservable, observable, action, flow } from 'mobx';
+import { TOKEN, USER_INFO } from '../../constants';
+import { removeAsyncStorage, setAsyncStorage } from '../../utils/storage';
+import { UserInfo } from './types';
+
+export class UserStore {
+  username: string = '';
+  userInfo: UserInfo | null = null;
+
+  constructor() {
+    makeObservable(this, {
+      username: observable,
+      setUsername: action,
+      setUserInfo: flow,
+      removeUserInfo: flow,
+    });
+  }
+
+  setUsername(username: string) {
+    this.username = username;
+  }
+
+  removeUsername() {
+    this.username = '';
+  }
+
+  // 使用 flow 代替 async / await，具体可看mobx官方文档https://zh.mobx.js.org/actions.html#%E4%BD%BF%E7%94%A8-flow-%E4%BB%A3%E6%9B%BF-async--await-
+  *setUserInfo(userInfo: UserInfo) {
+    try {
+      yield setAsyncStorage(USER_INFO, userInfo);
+      this.userInfo = userInfo;
+    } catch (error) {
+      console.log('store存储用户信息失败----------', error);
+
+      this.userInfo = null;
+    }
+  }
+
+  *removeUserInfo() {
+    try {
+      yield removeAsyncStorage(TOKEN);
+      yield removeAsyncStorage(USER_INFO);
+      // 商品分享口令生成数字
+      yield removeAsyncStorage('SHARE_CODE_NUM');
+      // console.log('store移除用户信息-----Success');
+      
+      this.userInfo = null;
+    } catch (error) {
+      console.log('store移除用户信息-----Error', error);
+    }
+  }
+}

src/views/AccountInfo/index.tsx

 import React from 'react';
 import { View, Button } from 'react-native';
 import { RootStackScreenProps } from '../../routers/types';
-import useStores from '../../store/useStores';
+import { useStores } from '../../store/useStores';
 import { ContentItem } from './ContentItem';
 import { styles } from './styles';
 
@@ -21,8 +21,7 @@ const AccountInfo: React.FC<TestDetailsScreenNavigationProp> = ({
   const { userStore } = useStores();
 
   const loginOut = () => {
-    // removeUserInfo()
-    console.log(userStore);
+    userStore.removeUserInfo();
 
     navigation.navigate('BottomTabs', {
       screen: 'PersonalCenter',

src/views/PersonalCenter/index.tsx

@@ -3,6 +3,7 @@ import { StackScreenProps } from '@react-navigation/stack';
 import React from 'react';
 import { View, Text } from 'react-native';
 import { RootTabScreenProps, RootStackParamList } from '../../routers/types';
+import { useStores } from '../../store/useStores';
 import { styles } from './styles';
 
 type PersonalCenterNavigationProp = CompositeScreenProps<
@@ -13,8 +14,12 @@ type PersonalCenterNavigationProp = CompositeScreenProps<
 const PersonalCenter: React.FC<PersonalCenterNavigationProp> = ({
   navigation,
 }) => {
+  const { userStore } = useStores();
+
   const goAccountInfo = () => {
     navigation.navigate('AccountInfo');
+    // 测试mobx
+    userStore.setUsername('张三');
   };
 
   return (