Mobx: Mobx store changes are not updated in other components (React-Native)

[sakirpatel]

Package.json file

{
  "name": "gyftm",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/netinfo": "5.9.4",
    "@react-native-community/picker": "1.6.5",
    "@react-native-community/toolbar-android": "0.1.0-rc.2",
    "axios": "0.19.2",
    "formstate": "1.3.0",
    "lodash": "4.17.19",
    "mobx": "5.9.0",
    "mobx-persist": "0.4.1",
    "mobx-react": "5.4.3",
    "mobx-state-tree": "3.13.0",
    "native-base": "2.13.12",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-config": "1.3.1",
    "react-native-device-info": "5.6.1",
    "react-native-extra-dimensions-android": "1.2.5",
    "react-native-gesture-handler": "1.6.1",
    "react-native-iphone-x-helper": "1.2.1",
    "react-native-reanimated": "1.9.0",
    "react-native-router-flux": "4.2.0",
    "react-native-screens": "2.9.0",
    "react-native-splash-screen": "3.2.0",
    "react-native-vector-icons": "6.7.0",
    "validator": "13.1.1"
  },
  "devDependencies": {
    "@babel/core": "7.6.2",
    "@babel/plugin-proposal-decorators": "7.3.0",
    "@babel/preset-flow": "7.0.0",
    "@babel/preset-stage-0": "7.8.3",
    "@babel/runtime": "7.0.0-beta.55",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.5.1",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.58.0",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./src/assets/fonts/"
    ]
  }
}

Store.js

import { observable, action, computed } from 'mobx'
import { persist } from 'mobx-persist'

export default class HomeStore {
    @persist('object') @observable selectedProvider
    @persist('object') @observable Providers
    @observable selectedService

    @action
    setProviders(providers) {
        this.Providers = providers
    }

    @action
    setSelectedService(serviceId) {
        this.selectedService = serviceId
    }

    @action
    setSelectedProvider(provider) {
        this.selectedProvider = provider
    }

    @computed
    get getService() {
        return this.selectedService
    }

    @computed
    get getProviders() {
        return this.Providers
    }

    @computed
    get getSelectedProvider() {
        return this.selectedProvider
    }
}

setData in Store (Home.js)

 componentWillMount(){
        const {setProviders,setSelectedProvider} = this.props.homeStore
        getProviders().then((data)=>{
            setProviders(data)
            setSelectedProvider([])

        }).catch((error)=>{
            console.log(error)
        })
    }

Show Data from Store Code

import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'


@inject('navigationStore','homeStore')
@observer
export default class Home extends Component {
  render() {
        const { homeStore } = this.props
        console.log("HomeStore ",homeStore);
        return (
            <View>
            </View>
)}
}

Output

[mweststrate]

If you deconstruct methods from an object they wont be bound to the
instance anymore. Use homeStore.setStuff(....) instead

On Thu, 16 Jul 2020, 07:16 Sakir Bhad, [e-mail] wrote:

### Package.json file

{
"name": "gyftm",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@react-native-community/netinfo": "5.9.4",
"@react-native-community/picker": "1.6.5",
"@react-native-community/toolbar-android": "0.1.0-rc.2",
"axios": "0.19.2",
"formstate": "1.3.0",
"lodash": "4.17.19",
"mobx": "5.9.0",
"mobx-persist": "0.4.1",
"mobx-react": "5.4.3",
"mobx-state-tree": "3.13.0",
"native-base": "2.13.12",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-config": "1.3.1",
"react-native-device-info": "5.6.1",
"react-native-extra-dimensions-android": "1.2.5",
"react-native-gesture-handler": "1.6.1",
"react-native-iphone-x-helper": "1.2.1",
"react-native-reanimated": "1.9.0",
"react-native-router-flux": "4.2.0",
"react-native-screens": "2.9.0",
"react-native-splash-screen": "3.2.0",
"react-native-vector-icons": "6.7.0",
"validator": "13.1.1"
},
"devDependencies": {
"@babel/core": "7.6.2",
"@babel/plugin-proposal-decorators": "7.3.0",
"@babel/preset-flow": "7.0.0",
"@babel/preset-stage-0": "7.8.3",
"@babel/runtime": "7.0.0-beta.55",
"@react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "6.5.1",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.58.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./src/assets/fonts/"
]
}
}

### Store.js

import { observable, action, computed } from 'mobx'
import { persist } from 'mobx-persist'

export default class HomeStore {
@persist('object') @observable selectedProvider
@persist('object') @observable Providers
@observable selectedService

@action
setProviders(providers) {
    this.Providers = providers
}

@action
setSelectedService(serviceId) {
    this.selectedService = serviceId
}

@action
setSelectedProvider(provider) {
    this.selectedProvider = provider
}

@computed
get getService() {
    return this.selectedService
}

@computed
get getProviders() {
    return this.Providers
}

@computed
get getSelectedProvider() {
    return this.selectedProvider
}

}

### setData in Store (Home.js)

componentWillMount(){
const {setProviders,setSelectedProvider} = this.props.homeStore
getProviders().then((data)=>{
setProviders(data)
setSelectedProvider([])

    }).catch((error)=>{
        console.log(error)
    })
}

### Show Data from Store Code

import React, { Component } from 'react'
import { View, Text, Item, Input, Button } from 'native-base'
import { inject, observer } from 'mobx-react'
import Page from '@page'
import Card from '@card'
import Icon from 'react-native-vector-icons/FontAwesome5'
import style from './style'
import fonts from '../../theme/fonts'
import colors from '../../theme/colors'
import { Colors, Fonts, Metrics } from '@theme'
const { fontSize, fontType } = Fonts
const { paddings, margins } = Metrics
import { TouchableHighlight, TouchableOpacity } from 'react-native'
import { Actions } from 'react-native-router-flux'
import { getProviders } from './api'

@inject('navigationStore','homeStore')
@observer
export default class Home extends Component {
render() {
const { homeStore } = this.props
console.log("HomeStore ",homeStore);
return (


)}
}

### Output

[image: Capture_log]
https://user-images.githubusercontent.com/43002524/87633926-eff44000-c759-11ea-9f27-fd274c07372c.PNG

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/2399, or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAN4NBFY6O7MLWEE6UZD32DR32LM5ANCNFSM4O3UCYAQ
.