Магазин MobX-state-tree не отображается в реквизите - PullRequest
Новая
       69

Магазин MobX-state-tree не отображается в реквизите

1 голос
/ 06 августа 2020

Я внедряю MobX-state-tree в свое приложение React Native с помощью MobX-react-lite. Я могу получить доступ к магазину напрямую, используя ловушку, которую я написал из найденного мной учебника: 

const useInject = <T,>(mapStore: MapStore<T>) => {
  const store = useStore();
  return mapStore(store);
};

Однако я хочу иметь доступ к нему через props. Я чувствую, что упускаю шаг или что-то в этом роде. У меня есть некоторые данные, жестко закодированные в хранилище, к которым я могу получить доступ, напрямую обращаясь к ним из компонента, но я хочу иметь доступ к ним через props в каждом компоненте. Возможно ли это вообще? 

// Store.ts
import { types, Instance } from 'mobx-state-tree';

import { User } from './Models/User';

const RootStore = types.model({
  user: types.map(User),
});

export const store: RootStoreModel = RootStore.create({
  user: {
    1: {
      balance: '5046',
      email: 'email@email.com',
      firstName: 'Test',
      id: '5f02bbb4b30b4a67997fdfea',
      surname: 'Guy',
    },
  }
});

export type RootStoreModel = Instance<typeof RootStore>;
export default store;

// User.ts
import { types } from 'mobx-state-tree';

export const User = types.model({
  id: types.identifier,
  firstName: types.optional(types.string, ''),
  email: types.string,
  balance: types.optional(types.string, ''),
  surname: types.optional(types.string, ''),
})
  .actions((self: UserType) => ({
    setBalance(newBalance: string) {
      console.log('NEW BALANCE', newBalance);
      self.balance = newBalance;
    },
  }))
  .views((self) => ({
    get getBalance() {
      return self.balance;
    },
  }));

export default User;

// App.tsx
import React from 'react';
import 'mobx-react-lite/batchingForReactNative';
import { StoreProvider } from './src/Components/Context';

import store from './src/State/Store';

export default function App() {
  return (
    <StoreProvider value={store}>
      <MainNavigator initialRouteName={AppRoute.AUTH_LOADING} />
    </StoreProvider>
  );
}

// Component.tsx
import React, { useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { values } from 'mobx';

import { RootStoreModel } from '../State/Store';


import { useStore } from '../Components/Context';
import useInject from '../Hooks/UseInject';

const mapStore = ({ user }: RootStoreModel) => ({
  user,
});

export const MyComponent: React.FunctionComponent = (props: any) => {

  const { user } = useInject(mapStore);
  console.log('USER', user); // Returns the User from the state tree
  console.log('PROPS', props); // Doesnt contain the data from the state tree

  const UserArray = values(user);
  console.log('Array', UserArray); // Returns the array of users stored in the state tree


  return (
    <ScrollView>
      <Component />
    </ScrollView>
  );
};

export default observer(MeetingList);
...