Как отменить обновление() в магазине Svelte?

Магазины Svelte можно обновлять с помощью метода store.update().

store.update((currentValue) => {
  return currentValue + 1;
});

Можно ли отменить обновление в самой функции обновления, чтобы не срабатывали подписчики на магазин?

Например, мы можем захотеть ввести некоторую логику, чтобы решить, следует ли запускать и обновлять подписчикам или нет.

store.update((currentValue) => {
  // this doesn't work because it sets the value of the store to undefined
  if (currentValue >= 10) return;
  return currentValue + 1;
});

Решение состоит в том, чтобы заранее решить, следует ли обновлять магазин или нет, но в более сложных случаях это может стать громоздким и даже привести к дублированию кода.

if (get(store) < 10) {
  store.update((currentValue) => {
    return currentValue + 1;
  });
}

Есть ли другое решение этой проблемы?

Ваш второй фрагмент кода будет работать, если вы просто вернете currentValue из оператора if: if (currentValue >= 10) return currentValue;

JHeth 21.02.2023 21:15

@JHeth нет, потому что это все равно вызовет обновление независимо от возвращаемого значения.

Pier 21.02.2023 21:25

Имеет значение, если значение является примитивным 🔁 svelte.dev/repl/f2a0f56a630f4e0ca7cc8812fac939fd?version=3.5‌​5.1

Corrl 21.02.2023 22:44

@Коррл, интересно. К сожалению, мне это нужно для не примитивных значений.

Pier 21.02.2023 23:58
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Например. последний подход:

import { get } from 'svelte/store';

export class Cancel extends Error {}

export const cancel = () => { throw new Cancel() };

export function update(store, callback) {
    const value = get(store);
    try {
        const newValue = callback(value);
        store.set(newValue);
    }
    catch (e) {
        if (e instanceof Cancel)
            return;
        
        throw e;
    }
}

Использование:

update(store, value => {
    if (value == 10)
        cancel();
    
    return value + 1;
})

(Функция cancel также может быть передана обратному вызову в качестве другого аргумента.)

РЕПЛ

Другие вопросы по теме