Почему не срабатывают @action MobX
Начала изучать MobX, делаю ToDo list. Нужно реализовать фильтрацию task (all, active, completed). В store пишу @actions showAll, showCompleted, showActive , через пропсы прокидываю это в компонент TaskFilter на кнопки. При нажатии на кнопки срабатывает console.log, значит пропсы прокинуты верно, но сам код после return не срабатывает, ошибок в браузере нет. Как выполнить отрисовку этих экшенов?
Ссылка на гит: https://github.com/ValentinaIchyova/ToDo
import { makeObservable, computed, observable, action } from 'mobx';
class Store {
tasks = [
{id: 0, title: "Go to shop", done: false},
{id: 1, title: "Отнести пуховик в химчистку", done: true},
{id: 2, title: "Buy presents for Christmas to parents", done: false}
]
constructor() {
makeObservable(this, {
tasks: observable,
activeTasks: computed,
sortedTasks: computed,
addTask: action,
deleteTask: action,
doneTask: action,
showAll: action,
showActive: action,
showCompleted: action,
})
}
setTasks(payload) {
this.tasks = payload;
}
get activeTasks() {
return this.tasks.filter(task => !task.done).length;
}
get sortedTasks() {
const tasks = this.tasks;
return tasks
.slice()
.sort ((a,b) => a.done === b.done ? 0 : a.done ? 1 : -1);
}
addTask(task) {
let tasks = this.tasks;
tasks.push({
id: this.tasks.length || 0,
title: task,
done: false
});
this.setTasks(tasks);
}
doneTask(id) {
let tasks = this.tasks;
const index = tasks.map(task => task.id).indexOf(id);
tasks[index].done = true;
this.setTasks(tasks);
}
deleteTask(id) {
this.setTasks(this.tasks.filter(item => item.id !== id));
}
showAll() {
console.log('пропсы сработали ол');
return this.tasks;
}
showActive() {
console.log('пропсы сработали актив');
return this.tasks.filter(task => !task.done);
}
showCompleted() {
console.log('пропсы сработали компитид');
return this.tasks.filter(task => task.done);
}
}