CODEWITHSUNDEEP
javascriptreact-nativereact-hooksmobxmobx-react
jc28
jc28

Reputation: 1882

MobX store is not updating after fetch request in React Native app

I created a MobX store with async fetch function. When i call it i get the data from API. And i checked the data in console, and it comes every time, but MobX store is not changing it still the same. Can you tell please me how can i solve it?

MobX store:

import { createContext } from 'react'
import { action, decorate, observable, computed, runInAction } from 'mobx'
import mapObjects from '../utils/mapObjects'

export class DataStore {
  data = null
  error = false
  loading = true


  async fetchData(url) {
    this.data = null
    this.loading = false
    try {
      console.log('TRY')
      const response = await fetch(url)
      const jsonResponse = await response.json()
      const obj = await mapObjects(jsonResponse)
      runInAction(() => {
        console.log('WRITE!!!')
        this.loading = false
        this.data = obj
      })
    } catch (err) {
      runInAction(() => {
        console.log(err)
        this.loading = false
        this.error = err
      })
    }
  }
}

decorate(DataStore, {
  data: observable,
  error: observable,
  loading: observable,
  fetchData: observable
})

export default createContext(new DataStore())

Upvotes: 0

Views: 703

Answers (1)

thathat
thathat

Reputation: 595

In your decorate(...) call you are making fetchData an observable instead of an action.

Upvotes: 1

Related Questions