Skip to main content

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;