Что такое вычисляемое свойство в easy-peasy и как использовать вычисляемое свойство в easy-peasy с…

В easy-peasy вычисляемое свойство — это особый тип свойства состояния, значение которого определяется другими свойствами состояния. Это позволяет вам определить функцию, которая вычисляет значение на основе текущего состояния хранилища. Всякий раз, когда свойства зависимого состояния изменяются, свойство Computed автоматически обновляет свое значение.

Эта функция полезна для создания производных значений состояния, таких как объединение или преобразование существующих свойств состояния. Это помогает поддерживать чистоту и организованность логики управления состоянием.

Пример :

Предположим, у вас есть хранилище с некоторыми свойствами состояния в easy-peasy:

import { createStore, action } from 'easy-peasy';

const store = createStore({
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
});

Теперь давайте создадим несколько вычисляемых свойств для получения дополнительной информации из состояния:

Вычисление полного имени

const store = createStore({
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  fullName: computed(state => `${state.firstName} ${state.lastName}`),
});

2. Проверка, является ли человек взрослым (возраст ›= 18):

const store = createStore({
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  isAdult: computed(state => state.age >= 18),
});

3. Объединение нескольких свойств состояния:

const store = createStore({
  cart: {
    items: ['apple', 'banana', 'orange'],
  },
  totalItems: computed(state => state.cart.items.length),
});

Имея эти вычисляемые свойства, вы теперь можете получить доступ к производным значениям как к свойствам обычного состояния:

По мере изменения зависимых свойств состояния (например, firstName, lastName, age, cart.items) вычисляемые свойства (fullName, isAdult, totalItems) будут автоматически обновлять свои значения соответствующим образом.

Еще пример :

4. Расчет цены со скидкой:

const store = createStore({
  price: 100,
  discountPercentage: 20,
  discountedPrice: computed(state => state.price * (1 - state.discountPercentage / 100)),
});

5. Отслеживание количества выполненных задач в todo-листе:

const store = createStore({
  todos: [
    { id: 1, task: 'Buy groceries', completed: true },
    { id: 2, task: 'Do laundry', completed: false },
    { id: 3, task: 'Clean the house', completed: true },
  ],
  completedTasksCount: computed(state => state.todos.filter(todo => todo.completed).length),
});

6. Вычисление среднего массива чисел:

const store = createStore({
  numbers: [10, 20, 30, 40, 50],
  average: computed(state => state.numbers.reduce((acc, val) => acc + val, 0) / state.numbers.length),
});

7. Проверка наличия у пользователя прав администратора:

const store = createStore({
  user: {
    id: 1,
    name: 'Alice',
    isAdmin: true,
  },
  hasAdminPrivileges: computed(state => state.user.isAdmin),
});

8. Фильтрация и подсчет выполненных заказов:

const store = createStore({
  orders: [
    { id: 1, status: 'completed' },
    { id: 2, status: 'pending' },
    { id: 3, status: 'completed' },
    { id: 4, status: 'canceled' },
  ],
  completedOrders: computed(state => state.orders.filter(order => order.status === 'completed')),
  completedOrdersCount: computed(state => state.completedOrders.length),
});

9. Расчет общей стоимости заказа с учетом налогов и скидок:

const store = createStore({
  orders: [
    { id: 1, amount: 100, taxRate: 0.1, discount: 0.05 },
    { id: 2, amount: 200, taxRate: 0.15, discount: 0.1 },
  ],
  totalOrderValue: computed(state => 
    state.orders.reduce((total, order) => {
      const taxedAmount = order.amount * (1 + order.taxRate);
      const discountedAmount = taxedAmount * (1 - order.discount);
      return total + discountedAmount;
    }, 0)
  ),
});

10. Расчет ИМТ человека (индекс массы тела):

const store = createStore({
  person: {
    weightKg: 70,
    heightCm: 175,
  },
  bmi: computed(state => {
    const heightMeters = state.person.heightCm / 100;
    return state.person.weightKg / (heightMeters * heightMeters);
  }),
});

11. Группировка и классификация товаров в корзине:

const store = createStore({
  cart: [
    { id: 1, name: 'Apple', category: 'Fruits', price: 1 },
    { id: 2, name: 'Carrot', category: 'Vegetables', price: 0.5 },
    { id: 3, name: 'Milk', category: 'Dairy', price: 2 },
    { id: 4, name: 'Chicken', category: 'Meat', price: 5 },
  ],
  categories: computed(state => Array.from(new Set(state.cart.map(item => item.category)))),
  itemsByCategory: computed(state => {
    const itemsByCategory = {};
    state.categories.forEach(category => {
      itemsByCategory[category] = state.cart.filter(item => item.category === category);
    });
    return itemsByCategory;
  }),
});

12. интернет-магазин с товарами, скидками и корзиной

const store = createStore({
  products: [
    { id: 1, name: 'Laptop', price: 1000 },
    { id: 2, name: 'Headphones', price: 100 },
    { id: 3, name: 'Mouse', price: 20 },
  ],
  discounts: {
    laptopDiscount: 0.1,
    headphonesDiscount: 0.05,
    totalAmountDiscount: 0.15,
  },
  cart: [
    { productId: 1, quantity: 2 },
    { productId: 2, quantity: 1 },
  ],
  cartTotal: computed(state => {
    return state.cart.reduce((total, cartItem) => {
      const product = state.products.find(p => p.id === cartItem.productId);
      const discount = state.discounts[`${product.name.toLowerCase()}Discount`] || 0;
      return total + (product.price * cartItem.quantity * (1 - discount));
    }, 0);
  }),
});

👉Подпишитесь на Раджеша Голе, чтобы узнать больше

Что такое вычисляемое свойство в easy-peasy и как использовать вычисляемое свойство в easy-peasy с…

Похожие вопросы