MobX passing simple array from observable to observer

Question

I am new to MobX and was recommended it here. I have a simple array which I am trying to pass to another file. I have tried many things but I am unable to receive the array in the form of this.props.store If you could shine some light on my improper use of mobX it would be greatly appreciated. Thank you.

import React, { Component } from 'react';
import {
    Alert,
  AppRegistry,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';
import styles from '../styles/styles.js';
import {observable, extendObservable} from 'mobx';

//unsure why below code wont work, when trying to export it throws error: object is not a constructor (evaluating 'new rNumStore()')
// const rNumStore = observable([1,2,3]);

// a couple of other options both i am unsure why they do not work
// class rNumStore {
//  extendObservable(this, {
//   rNumbers: [1,2,3]});
// }
// class rNumStore {
// observable({rNumbers: [1,2,3]});
// }

//Current best working solution below
var rNumStore = function(){
    extendObservable(this, {
         rNumbers: [1,2,3]
    });
}


var Button = React.createClass({
    rNumberGen: function(){

        store.rNumbers = [Math.random(), Math.random(), Math.random()];

        var a = store.rNumbers[0].toString();
        var d =store.rNumbers.toString();
        Alert.alert(a, d);
        //this alert gives mobxArray of random numbers
    },

    render: function(){
        return(
                <TouchableHighlight onPress={this.rNumberGen} style=    {styles.center}>
                        <Text style={styles.button}>Generate!</Text>
                </TouchableHighlight>
            );
    }

});

var store = new rNumStore;
export default store;

export {Button};

Then the second file needs to observe the array

import React, { Component } from 'react';
import {
    Alert,
  AppRegistry,
  StyleSheet,
  TouchableHighlight,
  Text,
  View
} from 'react-native';
import{
    genre1,
    genre2,
    genre3
} from './genres.js';

import styles from '../styles/styles.js';

import {observer} from 'mobx-react/native';


var Genre = observer(React.createClass({

    alert: function(){
        //below does not cause an error.
        var a = this.props.store;
        //undefined ins not an object(evaluating 'this.props.store.rNumbers')
        // have tried making 'a' a state : this.props.store.rNumbers same error occurs at that point
        var b = this.props.store.rNumbers[1];
        var c = b.toString();
        Alert.alert('this is', c);

    },
    render: function(){
        let genre = this.props.selected;
        return(
            <TouchableHighlight onPress={this.alert}>
                <View style={styles.genre}>
                    <Text style={styles.center}>{genre}</Text>
                </View>
                </TouchableHighlight>
            );
    },
}));



module.exports = Genre;

where is you main app code? that should create the store, then in it's render it should have and — Peter Gelderbloem, Nov 02 '16 at 14:18
Honestly Peter, you are my guardian. After a while tinkering this got me to my solution. Would you like to post it as an answer and I can mark it correct. Or I can post a full solution in case anyone has a similar problem — onAsilver road, Nov 02 '16 at 16:29
Posted as an answer. If you have edit rights you can add code if you want — Peter Gelderbloem, Nov 02 '16 at 16:47

score 0 · Accepted Answer · edited Nov 02 '16 at 20:01

Where is your main app code? That should create the store, then in it's render it should have and tags that you pass the store to as a property

Edit: The main store needs a class:

class rNumStore {
  rNumbers = observable([1,2,3])

  rNumGen() {
    this.rNumbers = [Math.random(), Math.random(), Math.random()]
    //Alert.alert('this is', rNumbers.toString())
  }
}

class Main extends React.Component {
  render(){
    return(
        <View style={styles.container}>
            <Text style={styles.title}>Genre Genrerator</Text>

            <Text style={[styles.h2, styles.h21]}>I am listening to</Text>
            <View style={styles.genreContainer}>
                 <Genre store={store} selected='{genre[1]}'/>
                 <Genre store={store} selected='{genre[2]}'/>
                 <Genre store={store} selected='{genre[3]}'/>
            </View>
            <Text style={styles.h2}>You filthy casual</Text>
            <Button store={store}/>
      </View>
    );
  }
}


var store = new rNumStore;
export default store;
module.exports = Main;

which is exported as above. Then as Peter says the store then needs to be passed into the props of the observer classes. Thanks for the help.

MobX passing simple array from observable to observer

1 Answers1