Injecting Store in React component results in Error

Question

I am trying inject a store to my React Component however I am getting the following error:

Undefined is not a function (evaluating 'decorator(target,property,desc)')

In my App.js I have:

import React, { Component } from 'react';
import PoolComponent from './app/Components/PoolComponent';
import MeasurementsStore from './app/Stores/MeasurementsStore';

export default class PoolApp extends Component {

render() {
    return (
      <PoolComponent store="MeasurementsStore"/>
    );
}

}

In my PoolComponent.js

import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { AppRegistry, Text, View, TextInput , Picker, Button} from 'react-native';

@observer
export default class PoolComponent extends Component {
saveItems() {
    console.log('Pressed save');
}
render() {
    const store = this.props.store;
    return (
        <View>
            <Text>Selecteer Pool</Text>
            <Picker>
                <Picker.Item label="Big" value="big"/>
                <Picker.Item label="Small" value="small"/>
            </Picker>
            <Text>PH</Text>
            <TextInput/>

            <Text>Totaal Chloor</Text>
            <TextInput/>

            <Text>Vrij Chloor</Text>
            <TextInput/>
            <Button
                title="Learn More"
                color="#841584"
                accessibilityLabel="Opslaan"
                onPress={this.saveItems}
            />
        </View>
    );
}
}

And in MeasurementsStore.js I have

import {observable, action, computed} from 'mobx-react';

export default class MeasurementsStore {
    @observable phValue = 0;
    @observable freeChlorine = 0;
    @observable totalChlorine = 0;
    @observable totalAlkalinity = 0;

    @action data(data: Object) {
        if (data.phValue) {
            this.phValue = data.phValue;
        }
        if (data.freeChlorine) {
            this.freeChlorine = data.freeChlorine;
        }
        if (data.totalChlorine) {
            this.totalChlorine = data.totalChlorine;
        }
        if (data.totalAlkalinity) {
            this.totalAlkalinity = data.totalAlkalinity;
        }
    }
}

You are importing `inject` into your `PoolComponent.js` file, but you don't seem to use it. Do you get this error without using `inject`? — Tholle, Sep 10 '17 at 09:45
I tried to print these two things: and {this.props.store.phValue} but both result in the same error. — sanders, Sep 10 '17 at 09:51
I see. But you are not actually using `inject` anywhere in the code you have included in your question. Also, you want to import from `mobx` in your `MeasurementsStore.js` file, not `mobx-react`. — Tholle, Sep 10 '17 at 09:56
When I put `@inject('MeasurementsStore')` above my `PoolComponent` and change `mobx-react` to `mobx` then I get this error: `Undefined is not a function (evaluating '(0, _mobx.inject)('MeasurementsStore')')` And when I import the store I get the same error as in my start post — sanders, Sep 10 '17 at 10:01

score 3 · Accepted Answer · edited Sep 15 '17 at 11:24

You don't need inject in this case. You are passing the store directly to your PoolComponent, so there is no need for it. You need to change a few things however:

Pass the actual store, not just the store name as a string, in App.js:

import React, { Component } from 'react';
import PoolComponent from './app/Components/PoolComponent';
import measurementsStore from './app/Stores/MeasurementsStore';

export default class PoolApp extends Component {

render() {
    return (
      <PoolComponent store={measurementsStore}/>
    );
}

Import from mobx and export an instance of MeasurementsStore in MeasurementsStore.js:

import {observable, action, computed} from 'mobx';

class MeasurementsStore {
    @observable phValue = 0;
    @observable freeChlorine = 0;
    @observable totalChlorine = 0;
    @observable totalAlkalinity = 0;

    @action data(data: Object) {
        if (data.phValue) {
            this.phValue = data.phValue;
        }
        if (data.freeChlorine) {
            this.freeChlorine = data.freeChlorine;
        }
        if (data.totalChlorine) {
            this.totalChlorine = data.totalChlorine;
        }
        if (data.totalAlkalinity) {
            this.totalAlkalinity = data.totalAlkalinity;
        }
    }
}

const measurementsStore = new MeasurementsStore();

export default measurementsStore;

Injecting Store in React component results in Error

1 Answers1

Linked