MobX Core 개념 제대로 사용하고 있습니까?

// class.ts
import { makeObservable, observable, computed, action, flow } from "mobx"  

export class Doubler {  
	list: List[] = []
	sortType : string = DEFAULT_SORT_TYPE
	
	constructor() {  
		makeObservable(this, {  
			list: observable,
			sortType: observable,
			getTotalListCount: computed,  
			setDefaultSortType: action,  
		})  
	}  
  
	get getTotalListCount() {  
		return this.list.length;  
	} 
  
	setDefaultSortType() {  
		this.sortType = DEFAULT_SORT_TYPE;
	}  
}

const todosById = observable({  
	"TODO-123": {  
		title: "find a decent task management system",  
		done: false  
	}  
})  
  
todosById["TODO-456"] = {  
	title: "close all tickets older than two weeks",  
	done: true  
}

// ✅ 좋은 예 
// Doubler 클래스 내부
setDefaultSortType() { // action 선언 후
	this.sortType = DEFAULT_SORT_TYPE;
}

// UI 컴포넌트
const sortTypeHandler = () => {
	boubler.setDefaultSortType()
}

// ❌ 나쁜 예
// UI 컴포넌트 : 직접 상태 값에 접근
const sortTypeHandler = () => {
	boubler.sortType = DEFAULT_SORT_TYPE;
}

// 내가 사용한 방식
return (
	<button onClick={action(() => sortTypeHandler())}>리셋</butoon>
)

// action 함수 wrapping

return (
	<button onClick={action(() => sortTypeHandler())}>리셋</butoon>
)

// 내가 작성한 예 : 결론적으로 나쁜 예시 ❌
// UI 컴포넌트
const { boubler } = useStore();
// const {boubler : { setDefaultSortType }} = useStore();

const sortTypeHandler = () => {
	boubler.setDefaultSortType()
	// 구조 분해 할당으로 메서드를 할당하고 싶었습니다.
	// setDefaultSortType()
}

return (
	<button onClick={() => sortTypeHandler()}>리셋</butoon>
)

// 클래스 내부
	setDefaultSortType: action

	setDefaultSortType() {  
		this.sortType = DEFAULT_SORT_TYPE;
	}  

// 클래스 내부
	setDefaultSortType() {  
		this.sortType = DEFAULT_SORT_TYPE;
	} 
	
// UI 컴포넌트
const { boubler : { setDefaultSortType }} = useStore();
const destructuring = useStore().boubelr.setDefaultSortType;

console.log(setDefaultSortType === destructuring) // true

destructuring() // this == undefined

// 좋은 예 👍
// 클래스 내부: 편의상 변경 부분만 적었습니다.
	setDefaultSortType: action.bound

	setDefaultSortType() {  
		this.sortType = DEFAULT_SORT_TYPE;
	}  

// UI 컴포넌트
const { boubler : { setDefaultSortType }} = useStore();

const sortTypeHandler = () => {
	setDefaultSortType()
}

// 내가 사용한 예 : 잘못된 예 ❌
// 클래스 내부
fetchList() {  
	getListFromServer() // Promise를 리턴하는 비동기 함수
		.then((data) => {  
			this.list = data;  
		})  
		.catch((err) => console.log(err));  
}

// 좋은 예시 👍 : 1
// 프라미스 해결 핸들러는 인라인으로 처리되지만 
// 원래 작업이 완료된 후에 실행되므로 `action`으로 래핑해야 합니다.
fetchList() {  
	getListFromServer() // Promise를 리턴하는 비동기 함수
		.then(action('fetchSuccess', data => {
			this.list = data;
		}))  
		.catch(action((err) => console.log(err)));  
}

// then()의 첫번째 인자는 성공했을 때, 두번째 인자는 실패했을 때입니다.
fetchList() {  
	getListFromServer() // Promise를 리턴하는 비동기 함수
		.then(this.successAction, this.failAction)
}


// async/await를 사용한다면?
// `await` 이후 단계가 동일하지 않기 때문에 action 래핑이 필요합니다. 
// 여기에서 `runInAction`을 활용할 수 있습니다.
async fetchList() {  
	try {  
		const data = await getListFromServer();  
		runInAction(() => (this.list = data));  
	} catch (e) {  
		runInAction(() => console.log(e));
	}  
}

// class.ts
export class Doubler {  
	list: List[] = []
	
	constructor() {  
		makeObservable(this, {  
			list: observable,
			getTotalListCount: computed,  
			getActiveItemIndex: computed,
			insertItem: action
		})  
	}  
  
	get getTotalListCount() {  
		return this.list.length;  
	}
	
	get getActiveItemIndex() {  // computed
		return this.list.findIndex((item) => item.active);  
	}

	insertItem(item: Item) {  // action
		const targetIndex = this.getActiveItemIndex;  
		this.list.splice(targetIndex + 1, 0, item);  
	}
}
// UI 컴포넌트
return (
	<span>{doubler.getTotalListCount}</span>
)

// class 내부
// 첫번째 예제를 참조해주세요.
get getTotalListCount() {  // computed
	return this.list.length;  
}

changeProblemStatus(id: number) { // action
	this.list = this.list.map((item) => {  
		if (item.id === id) return { ...item, active: true };  
		else return { ...item, active: false };  
	});
}

// UI 컴포넌트
return (
	<span>list의 총 갯수 : {doubler.getTotalListCount}</span>
)

changeProblemStatus(id: number) { // action
	const currentActiveItem = this.list.findIndex((item) => item.active);
	const targetIndex = this.list.findIndex((item) => item.id === id);  
	if (currentActiveItem !== -1) {  
		this.list[currentActiveItem].active = false;  
	}  
	this.list[targetIndex].active = true;
}

export class Doubler {  
	list: List[] = []
	sortType : string = DEFAULT_SORT_TYPE
	
	constructor() {  
		makeObservable(this, {  
			list: observable,
			sortType: observable,
			getTotalListCount: computed,  
			setDefaultSortType: action,  
		})
		autorun(() => console.log('autorun'))
	}  
  
	get getTotalListCount() {  
		return this.list.length;  
	} 
  
	setDefaultSortType() {  
		this.sortType = DEFAULT_SORT_TYPE;
	}  
}

autorun(()=>console.log('외부 autorun'))