Сценарий
У меня есть две модели, одна из которых - Expense, а другая - DailyExpense (которая содержит массив Expense), как следует из названия, Expense - это просто отдельный элемент Expense, в то время как DailyExpense содержит связку Expense.
import { types } from 'mobx-state-tree';
/**
* Expense model which holds individual item
*/
export const Expense = types.model({
name:types.string,
price:types.number,
quantity:types.number,
}).actions(self => ({
changeName(newName) {
self.name = newName
},
changePrice(newPrice) {
self.price = newPrice
},
changeQuantity(newQuant) {
self.quantity = newQuant
},
})).views(self => ({
get totalPrice () {
return self.price * self.quantity
}
}))
/**
* DailyExpense model which have arrays of Expense
* Also have date as unique identifier
*/
export const DailyExpense = types.model({
date:types.string,
items:types.optional(types.array(Expense),[])
}).actions(self => ({
changeDate (newDate) {
self.date = newDate
},
addItem (newItem) {
self.items.push(newItem)
},
removeItem (name) {
const index = self.items.findIndex(e => {
if(e.name === name)
return e
})
self.items.splice(index,1)
}
})).views(self => ({
get totalPrice () {
return self.items.reduce((sum,entry) => sum+(entry.price * entry.quantity),0)
}
}))
Вопрос
Можно ли создать модель для отслеживания всего моего DailyExpense
Я знаю, что могу создать еще одну модель, где я могу сделать что-то вроде этого
export const ExpenseList = types.model({
list:types.array(DailyExpense)
})
Но могу ли я создать модель, не задавая в ней какую-либо переменную, как здесь, без списка, что-то вроде этого (я знаю, что это не сработает, я пробовал это)
export const ExpenseList = types.model(types.array(DailyExpense))
Я пытался создать следующую модель
export const ExpenseList = types.model(types.array(DailyExpense))
.actions(self => ({
add (s) {
self.push(s);
}
}))
И я запускаю следующий тестовый пример, но он выдал ошибку [mobx-state-tree] Functions are not supported as properties, use views instead
it ('can add in list', () => {
const dailyExpense = DailyExpense.create ({
date: today,
items: [
{name: 'First Item', price: 20, quantity: 4},
{name: 'Second Item', price: 10, quantity: 2},
{name: 'Third Item', price: 5, quantity: 1}
],
});
const expenseList = ExpenseList.create(dailyExpense);
expect(expenseList.length).toBe(1);
});