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

이렇게 많은 상태 관리 솔루션이 네트워크에서 흐르고 있는데 그 중 많은 것들이 현재 상태에 집중하고 사용자가 페이지를 떠난 후에 모든 것을 잊어버렸다는 것을 알아차렸다.
우리가 매일 이동화 정도가 점점 높아지고 PWA의 사용 범위가 점점 넓어지면서 오프라인 첫 번째 체험은 당신의 인터넷 응용에 매우 중요하다.
게다가 현재 가장 자주 사용하는 상태 관리 시스템은 API를 배우거나 라이브러리, 예를 들어 React를 꾸준히 사용하도록 요구하는 것 같아서 프레임워크 불가지론을 고려한 상황에서 자신의 상태 관리 시스템을 작성하기로 결정했습니다.
따라서 더 이상 논의할 필요가 없습니다. Stoxy라고 소개합니다.
Stoxy 회사에서 저는 몇 가지 중요한 기둥이 있는데 이 기둥들을 둘러싸고 건설하고 싶습니다.

첫 번째 API 호출부터 시작하여 실행

간단하고 확장 가능하며 배우기 쉬운 API

프레임 불가지론자

오프라인은 처음부터 준비됐습니다.

Stoxy는 이러한 스톡을 고려하여 만들어졌으며 웹 구성 요소를 포함하여 라이브러리를 지원합니다.이 구성 요소들은 완전히 선택할 수 있으며 기본 상태 관리는 이런 구성 요소를 필요로 하지 않는다
이 문서에서는 Stoxy 관리 상태의 기본 기능에 대해 설명합니다.

읽기와 쓰기

가장 기본적인 상태 관리 작업은 상태에서 데이터를 읽고 쓰기 위한 것이다.
많은 상태 관리 시스템에서, 상태 변경을 처리하기 위해 다양한 종류의 축소기를 만들고, 상태에 기본값을 지정한 다음 수정해야 합니다.
Stoxy를 사용하면 코드 한 줄만 있으면 시작하고 실행할 수 있습니다

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

write("counter", 0);

Stoxy도 당연히 복잡한 대상을 지원하기 때문에, 예를 들어 전체 로그인 사용자의 데이터를 상태로 설정할 수 있습니다

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

write("userData", userData);

이렇게 간단해.우리는 그 주에 저장된 데이터를 얻었고, 어느 곳에서든 데이터를 읽을 수 있었다.
데이터를 읽는 것도 마찬가지로 간단하다.그것은 약속에 기반한 시스템 운영을 둘러싸고 있으며, 이 시스템은 양호하고 직관적인 작업 절차를 허용한다.

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

read('userData').then(userData => {
    console.log("User name: " + userData.userName);
});

promises를 사용하는 이유는 인덱스 DB를 사용하여 데이터를 영구화하는 것입니다. 이것은 비동기적인 API입니다.
다음은 업데이트 상태를 살펴보겠습니다.

업데이트

상태 시스템의 경우, 일반적으로 상태 대상을 업데이트하기를 원하지만, 명시적으로 읽고 쓸 필요가 없습니다.이를 위해 Stoxy core는 예쁘고 빠른 업데이트 기능을 제공합니다.

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

update('counter', counter => (counter += 1));

업데이트 함수는 의뢰를 매개 변수로 하고 의뢰를 상태 대상에 적용합니다.
네가 의식할 수 있는 바와 같이, 이것은 대량의 비료를 주는 것을 허용한다.
만약 우리가 위의 사용자 데이터에 추가를 원한다면, 우리는 간단하게 운행할 수 있다

update('userData.customerPoints', points => (points += 100));

사용자 데이터의 상태도 상응하여 업데이트될 것이다.
Stoxy의 모든 상태 객체와 해당 속성에 직접 액세스할 수 있습니다.
이것은 사용자의 카트만 얻으려면 일반javascript 대상을 방문하는 것과 같은 방식을 사용할 수 있음을 의미한다

read("userData.shoppingCart").then(shoppingCart=> {
    shoppingCart.map(item => console.log(item));
});

쓰기 작업은 동일

write("userData.userName", "Foobar");

꾸준하다

본 시리즈의 첫 번째 부분의 마지막 부분으로서, 나는 제목에서 약속한 지속성을 어떻게 실현하는지 신속하게 소개할 것이다.
다음에 페이지를 방문할 때 저장할 수 있도록 사용자 데이터 state 대상을 영구화하고, 심지어는 API를 호출해서 가져오기 전에 저장하려고 합니다.우리는 코드 한 줄만 작성하면 이 점을 실현할 수 있다.
응용 프로그램이 시작될 때, 우리는 우리가 사용하고자 하는 것을 성명할 것이다

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

persistKey('userData');

우리 다 준비됐어!이후 Stoxy는 모든 제어권을 인수하여 인덱스 DB에 데이터를 영구적으로 저장하여 나중에 이 탐색 세션이나 다음 탐색 세션에서 사용할 수 있도록 합니다.

마지막 한마디

이것은 여러 부분으로 구성된 시리즈 문장의 첫 부분인데, 이 시리즈 문장에서 나는 Stoxy의 특징을 소개할 것이다.나는 네가 첫 번째 부분을 좋아하고 다음 부분을 계속 주목하길 바란다.
스토시에 대해 더 알고 싶다면:

Read the documentation and guides at Stoxy.dev

Check out the code and star the GitHub Repo

다음까지!
Stoxy 소개 두 번째 섹션은 다음과 같습니다.

Stoxy를 사용하여 신속, 제로 설정, 지속 상태 관리 섹션 2:

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