How to enable strict mode in mobx store, react-native

Question

how can I enable strict mode for my mobx stores in my react-native map, I use mobx stores along with react context API and hooks. After reading docs strict mode makes it so I can only change observable state in actions.

/contexts/index.js

import React from 'react'
import { ThemeStore }  from '../stores/ThemeStore.js'
import { PostStore }  from '../stores/PostStore.js'

export const storesContext = React.createContext({
  postStore: new PostStore(),
  themeStore: new ThemeStore(),
})

/stores/PostStore.js

import { observable, computed, action, flow } from "mobx";
import axios from 'axios';

export class PostStore
{
    
    
    @observable postMessage = 'Nothing to see here';
    @observable post = {};
    @observable posts = [];
    @observable pagination = {};
    @observable postCount = 0;


    @computed get visiblePosts()
    {
        return this.posts.filter( post => post.isVisible);
    };


}

Answer 1

If I understood you correctly, you want to enforce strict mode in your mobx stores. The command for that would be

import { configure } from 'mobx';

configure({ enforceActions: "observed" })

That won't allow you to modify the state outside actions. When set it sets global behaviour on the active mobx instance.

You can find more info here: https://mobx.js.org/refguide/api.html#configure