How to use mobx6 to load data dynamically

mobx is a lightweight state manager, so it is very simple (single global data uses class) class with get data methods.

use

1. Download the mobx library and the mobx-react-lite library

2. Create

import { observable, action,makeAutoObservable } from 'mobx';
class BookStore{
     bookList=[];
     count=0;
     constructor(){
        makeAutoObservable(this); //Make the variable automatically become an observerable variable     }
     add=()=&gt;{
     ++;
     }
     addBook=(book)=&gt;{
     	fetch('/book/add')
     }
     getBookList=()=&gt;{
        fetch('/book/list')
     }
     }
}
let bookStore=new BookStore();
export default bookStore

3. Observer package in react component

import { observer } from 'mobx-react-lite';
const BookList= observer(() => {
	return()
})

Things to note

 InsideobserverVariables must be placedreact renderRefresh only in the component
 {/* The render component must have the value of mobx store to refresh */}
 return (
	&lt;Button onClick={()=&gt;{
		 ()
	}}&gt;
		 {}
	&lt;/Button&gt;
)
2.Non-basic types need to be usedtoJsConvert
In definition
data={"id":1,"name","abc"}
existreactUsed in
toJs()
3.请求初始化数据existUseEffectExecute in
 useEffect(() =&gt; {
    ();
  }, []);

This is the article about react dynamically loading data using mobx6. For more related react dynamic loading data content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!