Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed

[Gabotron-ES]

I'm using mobx as state management for my react-native app, I'm modifying a simple array of ids like this:

let copyy = userStore.unreadChatIds;
copyy.push(e.message.chat_id);
userStore.setUnreadChatIds(copyy);

However I'm getting this mobx warning, I don't know why I'm getting it since I'm using makeAutoObservable in my mobx store!

[MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: UserStore@1.unreadChatIds

My store

export class UserStore
{
    constructor()
    {
        makeAutoObservable(this);
        
unreadChatIds=[];

setUnreadChatIds(payload)
    {
        this.unreadChatIds = payload;
    }
}

Why am I getting this error and how can I solve it? afaik if using makeAutoObservable and use my setter method as action I'm not changing mobx state directly.

[kubk]

The warning says that you are updating observable outside an action.

let copyy = userStore.unreadChatIds;
copyy.push(e.message.chat_id);
userStore.setUnreadChatIds(copyy);

This code mutates unreadChatIds outside action (also outside Mobx). A solution is to move all the mutations to store's actions

[gregg-cbs]

Right so after reading the documentation here are the options you have to get rid of this error.

Option 1:
Handle promise updates in separate functions
This is probably the closest to a native class that you will get

import { makeAutoObservable } from "mobx"

class Store {
    githubProjects = []
    state = "pending" // "pending", "done" or "error"

    constructor() {
        makeAutoObservable(this)
    }

    fetchProjects() {
        this.githubProjects = []
        this.state = "pending"
        fetchGithubProjectsSomehow().then(this.projectsFetchSuccess, this.projectsFetchFailure)
    }

    projectsFetchSuccess = projects => {
        const filteredProjects = somePreprocessing(projects)
        this.githubProjects = filteredProjects
        this.state = "done"
    }

    projectsFetchFailure = error => {
        this.state = "error"
    }
}

Option 2:
Wrap promise.then updates in the action function
pretty much the same as runInAction

import { action, makeAutoObservable } from "mobx"

class Store {
    githubProjects = []
    state = "pending" // "pending", "done" or "error"

    constructor() {
        makeAutoObservable(this)
    }

    fetchProjects() {
        this.githubProjects = []
        this.state = "pending"
        fetchGithubProjectsSomehow().then(
            action("fetchSuccess", projects => {
                const filteredProjects = somePreprocessing(projects)
                this.githubProjects = filteredProjects
                this.state = "done"
            }),
            action("fetchError", error => {
                this.state = "error"
            })
        )
    }
}

Option 3:
Flow + Generator

import { flow, makeAutoObservable, flowResult } from "mobx"

class Store {
    githubProjects = []
    state = "pending"

    constructor() {
        makeAutoObservable(this, {
            fetchProjects: flow
        })
    }

    // Note the star, this a generator function!
    *fetchProjects() {
        this.githubProjects = []
        this.state = "pending"
        try {
            // Yield instead of await.
            const projects = yield fetchGithubProjectsSomehow()
            const filteredProjects = somePreprocessing(projects)
            this.state = "done"
            this.githubProjects = filteredProjects
            return projects
        } catch (error) {
            this.state = "error"
        }
    }
}

const store = new Store()
// you have to use this `flowResult` function :/
const projects = await flowResult(store.fetchProjects())

Option 4:
Updating of fields after awaiting a function use runInAction.

import { runInAction, makeAutoObservable } from "mobx"

class Store {
    githubProjects = []
    state = "pending" // "pending", "done" or "error"

    constructor() {
        makeAutoObservable(this)
    }

    async fetchProjects() {
        this.githubProjects = []
        this.state = "pending"
        try {
            const projects = await fetchGithubProjectsSomehow()
            const filteredProjects = somePreprocessing(projects)
            runInAction(() => {
                this.githubProjects = filteredProjects
                this.state = "done"
            })
        } catch (e) {
            runInAction(() => {
                this.state = "error"
            })
        }
    }
}

https://mobx.js.org/actions.html#examples