I get a warning 'changing observable values without using an action is not allowed.' How the action works?

[astranavt]

mobx warned me that I should change the variable by wrapping it in an action

Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: ObservableObject@6.posts
I wrapped the variable posts in an action function and called her. Here is my code, it works without warning and errors.

import Axios from 'axios';
import { action, makeAutoObservable } from 'mobx';

export type PostStore = {
  loadPosts: () => void;
  posts: { id: number; title: string }[];
};

const exampleStore = (): PostStore => {
  return makeAutoObservable<PostStore>(
    {
      posts: [],
      async loadPosts() {
        const { data } = await Axios.get('https://my-json-server.typicode.com/typicode/demo/posts');
        const posts: [] = data;

        action(() => {
          this.posts = posts.map(x => x);
        })();
      },
    },
    { loadPosts: action },
  );
};

export { exampleStore };

if I wrap the whole function in an action then the warning appears again

    async loadPosts() {
        action(async () => {
          const { data } = await Axios.get(
            'https://my-json-server.typicode.com/typicode/demo/posts',
          );
          const posts: [] = data;

          this.posts = posts.map(x => x);
        })();
      },

why?

how to wrap a function in an action, and safely update the variable without getting warnings?

[mweststrate]

We do write docs for a reason....

https://mobx.js.org/actions.html#asynchronous-actions