스토시의 힘을 보여주는 다부분 시리즈의 두 번째 부분이다.나는 그 전에 첫 번째 부분을 통독해서 완전한 체험을 얻기를 강력히 건의한다.

Stoxy를 사용한 빠른 설정, 영구 상태 관리

송포・ 3월 15일・ 3분 읽기

#showdev #webdev #javascript #state

요약: Stoxy는 웹 구성 요소가 포함된 상태 관리 시스템입니다.문서, 안내서 및 자세한 내용은 Stoxy.dev에서 확인할 수 있습니다.
지난번에 우리는 Stoxy가 제공하는 기본적인 읽기와 쓰기 작업과 Stoxy를 통해 페이지를 불러와서 데이터를 지속하는 것이 얼마나 쉬운지 토론했다.

데이터 추가

웹 응용 프로그램을 개발할 때, 우리는 최종적으로 데이터 집합을 진열에 저장할 때가 많다.많은 경우, 우리는 자신이 하나의 상태에 있다는 것을 발견하고, 우리는 그것을 완전히 다시 쓰는 것이 아니라 상태 데이터에 추가하기를 원한다.이것이 바로 Stoxy의dd 키워드가 작용하는 곳이다.
이전 장의 사용자 데이터 객체가 있다고 가정합니다.

const userData = {
    userName: "Stoxy",
    customerPoints: 10,
    shoppingCart: [
        { id: 123, name: "Flaming hot cheetos" }
    ],
    shoppingHistory: {
        latestProducts: [
            { id: 555, name: "Doritos" },
            { id: 958, name: "Pringles" }
        ]
    }
};

카트에 다른 제품을 추가하고 싶습니다.심지어state 대상을 인용하지 않아도 우리는dd를 사용하여 그 중의 그룹을 쉽게 수정할 수 있다.

import { add } from '@stoxy/core';

const product = { id: 555, name: "Doritos" };
add("userData.shoppingCart", product);

state 대상은 우리의 신제품을 미리 존재하는 그룹에 추가합니다. state 대상 자체를 수동으로 조작할 필요가 없습니다.
예시와 같이 이 조작은 완전한 상태 대상이 아니라 상태 대상의 속성을 목표로 할 수도 있다(필요할 경우).

데이터 삭제

우리가 상태 대상에 데이터를 추가하기를 원하는 것과 유사하게, 우리는 최종적으로 상태 대상에서 데이터를 삭제하기를 원할 수도 있고, 데이터를 현저하게 읽거나 쓸 필요가 없을 수도 있다.이 경우 remove는 매우 편리합니다.
만약 우리가 위에 추가된 다력다자를 없애려고 한다면 우리는 쉽게 술어로 그것들을 필터할 수 있다.

import { remove } from '@stoxy/core';

// Removes product with the id 555
remove("shoppingcart", product => product.id === 555);

remove의 힘은 대상 자체에 대한 인용이 아니라 술어를 통해 제거될 가능성에서 나온다.
예를 들어 우리는 제품 가격 신속 검사표를 작성하기만 하면 5유로가 넘는 모든 제품을 필터할 수 있다.

// Remove all products with a price over 5
remove("shoppingcart", product => product.price > 5);

dd와remove 함수는 데이터를 읽거나 쓸 필요가 없는 상태에서 데이터 집합을 간단하게 합니다.
주 전체에서 사용자 데이터를 삭제하려면clear 키워드를 사용할 수 있습니다.

import { clear } from '@stoxy/core';

clear('userData');

활동에 가입

많은 상황에서 우리는 상태 대상이 언제 모양을 바꾸고 반응하는지 알고 싶어 한다.이러한 상황에 대해 Stoxy는 sub이라는 API를 공개했다.
Sub에서는 개발자가 지정된 상태 객체 키의 상태 업데이트에 가입할 수 있습니다.

import { sub } from '@stoxy/core';

sub('userData', e => console.log('User Data updated. Current data: ', e.data));

이것은 상태 변화를 관찰할 때 주어진 구성 요소를 업데이트하는 등 반응식 작업 흐름을 만드는 것을 매우 간단하게 한다.

마지막 한마디

Stoxy가 개발자의 상태를 관리하기 위해 제공하는 대부분의 소형 API에 대해 설명했습니다.다음 장에서는 Stoxy에서 제공하는 웹 구성 요소를 소개하여 Stoxy를 사용하여 프레임워크 없는 개발을 편리하게 할 것입니다.
Stoxy는 여전히 적극적으로 개발 중이며, 유행하고 광범위하게 사용되는 상태 관리 시스템으로 교체를 시도하고 있다.Stoxy가 돋보이는 것을 돕기 위해서, 나는 네가 GitHub에 가서 이 프로젝트를 보고, 그것에 별을 주고, 그리고 너 자신의 프로젝트에서 한번 시험해 보길 바란다.

스토시js / 스토시

Stoxy는 사용 편의성을 위해 웹 구성 요소를 포함하는 상태 관리 API입니다.

🗂️ 스토시

Stoxy는 웹 구성 요소가 포함된 상태 관리 API입니다.
Stoxy를 사용하면 프레임의 무게 없이 DOM의 데이터를 쉽게 처리, 지속 및 업데이트할 수 있습니다.

📖 공식 문서

공식 파일을 찾을 수 있음here

❓ 어째서.

Stoxy는 브라우저의 도구를 사용하여 컴퓨터 메모리를 처리합니다.
Stoxy 는 IndexedDB 라는 브라우저의 데이터베이스에 데이터를 저장합니다.
최근 5번 액세스한 객체만 메모리에 저장하여 보다 빠르게 액세스할 수 있습니다.
Stoxy는 약속된 사용 흐름을 이용하여 메모리에서 비동기적으로 읽기와 쓰기를 매우 쉽게 한다.
만약 브라우저가 IndexedDB를 지원하지 않는다면 걱정하지 마십시오.Stoxy 는 이러한 사례를 자동으로 인식합니다.
사용하지 않고 메모리 시스템만 사용하도록 선택하십시오.

❓ 왜?

모티프

Stoxy의 이면에는 여러 애플리케이션의 상태 관리를 위한 보다 간편한 솔루션이 포함되어 있습니다.
스토시에서 너는 한 줄만 쓰고 달리기를 시작했는데..
View on GitHub