react with mobx

Create a store

import { makeAutoObservable } from 'mobx';

class TodoStore {
    todos = [];

    constructor() {
        makeAutoObservable(this);
    }

// as you can see, we directly modified the todos instead of replace a new obj
// mobx 有意思的地方在于他违反了react的对象不可变性，可以直接修改todos对象
    addTodo = (text) => {
        this.todos.push({ id: Date.now(), text, done: false });
    };

    toggleTodo = (id) => {
        const todo = this.todos.find(todo => todo.id === id);
        if (todo) {
            todo.done = !todo.done;
        }
    };
}

export default new TodoStore();

Create a observer

import { observer } from 'mobx-react-lite';
import todoStore from './store';

const TodoApp = observer(() => {
    const { todos, addTodo, toggleTodo } = todoStore;

    const handleAddTodo = () => {
        const text = prompt('Enter a new todo:');
        if (text) {
            addTodo(text);
        }
    };

    return (
        <div>
            <button onClick={handleAddTodo}>Add Todo</button>
            <ul>
                {todos.map(todo => (
                    <li key={todo.id} onClick={() => toggleTodo(todo.id)} style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
                        {todo.text}
                    </li>
                ))}
            </ul>
        </div>
    );
});

export default TodoApp;