2017-06-01 2 views
1

C'est la première fois que j'utilise MobX donc c'est peut-être un problème plus simple que j'imagine, mais je ne reçois aucune erreur avec les choses que j'ai essayées; le magasin est simplement indéfini partout où j'essaie de l'utiliser. J'ai essayé d'importer le magasin directement dans les composants et de passer des accessoires du fichier principal (également avec, mais je ne suis pas sûr si j'ai utilisé ce droit). J'ai également expérimenté plusieurs paramètres de fichier .babelrc différents, mais cela ne semble pas être un problème.MobX avec React Native: le magasin est indéfini

Voici le UserStore:

import React from 'react'; 
 
import { observable } from 'mobx'; 
 

 
class UserStore { 
 
    @observable info = { 
 
    username: "bob", 
 
    password: "secret", 
 
    email: "[email protected]" 
 
    } 
 
} 
 

 
const userStore = new UserStore() 
 
export default userStore;

Voici un app.js simplifié:

import React, { Component } from 'react'; 
 
import { StyleSheet, Text, View } from 'react-native'; 
 
import Profile from './app/Profile.js'; 
 
import { UserStore } from './app/UserStore.js'; 
 

 
export default class App extends Component { 
 
    constructor(){ 
 
    super(); 
 
    this.state = { 
 
     page: 'Profile', 
 
    } 
 
    } 
 

 
    changePage(){ 
 
    switch (this.state.page) { 
 
     case "Profile": 
 
     return <Profile logout={this.logout.bind(this)} userStore={UserStore}/>; 
 
    } 
 
    } 
 

 
    render() { 
 
    return (
 
     <View> 
 
     {this.changePage()} 
 
     </View> 
 
    ); 
 
    } 
 
}

Et voici une P simplifiée rofile.js:

import React, { Component } from 'react'; 
 
import { StyleSheet, Text, View, Button } from 'react-native'; 
 
import { observer } from 'mobx-react/native'; 
 

 
@observer 
 
export default class Profile extends Component { 
 

 
    render() { 
 
    console.log(this.props.userStore); 
 
    return (
 
     <View> 
 
     <Text>Profile Page</Text> 
 
     <Text>username: {props from store go here}</Text> 
 
     <Text>password: {props from store go here}</Text> 
 
     <Text>email: {props from store go here}</Text> 
 
     </View> 
 
    ); 
 
    } 
 
}

Tout ce que je suis en train de faire est en ce moment obtenir l'objet observable « info » pré-définie du magasin au composant Profile.js et afficher ces informations . C'est beaucoup plus difficile que cela devrait être - toute idée est grandement appréciée!

+0

Je suis confronté presque exactement au même problème, mais je n'allais pas passer mon magasin à travers les accessoires. Est-ce nécessaire? Vous ne pouvez pas importer le magasin dans votre Profile.js? – AlxVallejo

+0

Bonne question! D'après ce que j'ai lu, il semble que vous devriez être capable de faire les deux façons, et l'importation directement en magasin peut être préférable. Voici une bonne discussion sur github: https://github.com/mobxjs/mobx/issues/300 Recherchez le (s) commentaire (s) de mweststrate pour une meilleure explication. La seule raison pour laquelle j'ai choisi de passer les accessoires était que je pouvais avoir ce seul point d'entrée avec mobx et le passer le long de la chaîne de réaction-navigation via les accessoires. J'espère que cela pourra aider! – swimisbell

+0

Je n'ai pas encore vu d'exemple d'importation directe d'un magasin et de son utilisation. Dans ce lien, l'exemple de l'OP n'injecte pas simplement un magasin. Plutôt, le magasin exporte un wrapper pour instancier le composant avec un accessoire de magasin. Alors ... ma question reste sans réponse je pense. – AlxVallejo

Répondre

2

Depuis que vous avez déclaré dans export default userStore; UserStore.js

Essayez de changer la façon dont vous importez dans app.js en supprimant le {}:

import UserStore from './app/UserStore.js';

{} est nécessaire que si vous voulez faire une Importation nommée. Here est une bonne lecture si vous voulez en savoir plus.

+0

Oh mon dieu ... bien sûr. Haha Certains jours, vous avez juste besoin d'une autre paire d'yeux. Merci beaucoup, fonctionne comme un charme! – swimisbell