S-FLUX V3, 전체 모드의 위력, Redux 용이성

S-Flux는 단방향 데이터 흐름으로 응용 프로그램의 조작을 동기화하여 데이터의 시각적 일치성을 확보하고 정보량이 시간에 따라 증가하더라도 관리의 단순성을 유지할 수 있다.

통량 모드는 단방향 데이터 흐름의 표시이다.이러한 정보 수명주기를 나타내는 방식은 각 주기에 대해 데이터를 사용하는 모든 구성 요소가 같은 정보 수준에 있을 수 있도록 보장합니다.
Dispatcher는 스태킹 작업을 저장소로 다시 배포하고 저장소는 순차적으로 정보를 처리하거나 처리하지 않습니다.정보를 처리한 후, 모든 상점은 보기에 더 많은 최신 데이터를 사용할 수 있음을 알릴 것이다.그런 다음 뷰가 해당 디스플레이를 업데이트합니다.
작업은 보기, 저장 또는 서버와 같은 다른 원본에 의해 촉발될 수 있습니다.모든 상황에서 모든 동작은 스케줄러가 순서대로 처리합니다.
S-Flux V3는 매우 단순화된 방법을 제공하기 때문에 설명 dispatcher 또는 stores 을 필요로 하지 않습니다.저장 작업만 정의하면 Shadow Flux는 전체 typescript intellisence 동적 생성 모든 조수 방법과 구독 방법을 사용합니다.
V3에서의 작업:

내부 기능:

샘플 정의

// State type
type CounterState = {
  counter: number;
};

// Events
const _events = Flux.withEvents({
  ForceCounter: ""
})

type TThis = TBaseStore<CounterState>;

// Actions
const _actions = {
  async increase(this: TThis) {
    this.nextState({
      counter: this.getState().counter + 1
    });
  },
  async decrease(this: TThis) {
    this.nextState({
      counter: this.getState().counter - 1
    });
  },
  async setCounter(this: TThis, payload: { counter: number }) {
    this.nextState({
      counter: payload.counter
    });
    return _events.ForceCounter; // Return specific event 
  }
}

export default Flux.registerStore({
  id: "Counter",
  async init(): CounterState { 
    return { counter: 0 };
  },
  actions : _actions,
  events  : _events
});

샘플 결과

import CounterStore from "path-to-store";

// CounterStore will be of type :
{
  getState() : CounterState ;
  id         : string       ;
  events: {
    All          : string ;
    ForceCounter : string ;
  },
  subscribeTo: {
    All          : ((state: CounterState) => void) => { off: () => void };
    ForceCounter : ((state: CounterState) => void) => { off: () => void };
  },
  actions: {
    increase   : () => void                             ;
    decrease   : () => void                             ;
    setCounter : (payload: { counter: number }) => void ;
  }
}

CounterStore 대상은 저장 작업에서 생성된 모든 조작 방법과 모든 이벤트의 모든 구독 방법을 제공합니다.

개요

원본 통량 모드에서는 다음 절차를 따라야 합니다.

실례화 스케줄러

하나 이상의 상점 만들기

스케줄러

에 모든 매장 등록

실례화된 구독자 조수

동작 생성을 관리하는 동작 조수 함수 만들기

스토어 이벤트 구독

하지만 이제 S-Flux v3에서 동일한 결과를 얻으려면 다음과 같이 하십시오.

1개 또는 여러 개의 매장 신고

store helper를 사용하여 사용 가능한 모든 작업에 접근

store helper를 사용하여 모든 이벤트 구독

상점

S-Flux에서 정보를 저장하는 데 사용됩니다.상점이 정확한 경계를 책임지는 것을 범위라고 한다.이 경계는 데이터 모델과 필요한 업무나 기술 규칙을 포함할 것이다.
기본적으로 저장소는 BaseStore 클래스를 확장하는 클래스입니다.이런 것들은 반드시 데이터 모델과 이 데이터 모델에 적용되는 규칙을 묘사해야 한다.이를 위해 데이터 모델은 상태 필드에 저장되고 규칙은 응용 프로그램이 외부에서 촉발할 수 있는 방법으로 설명됩니다.
저장은 반드시 자신의 데이터만 관리해야 한다.그러나 규칙 중 하나를 실행하는 과정에서 필요하면 다른 저장 영역의 데이터에 의존하여 데이터를 채울 수 있다.
성명을 간소화하고 저장하여 사용하기 위해 S-Flux는 원시 모델을 바탕으로 간소화를 도입하여 일정한 복잡도를 숨길 수 있고 데이터 검색에 필요한 번거로운 성명을 감소시켰다.단순화는 지원되지만 S-Flux에서 원본 모드를 보존하고 사용하려면 아래에 나와 있습니다.

행동

작업은 저장된 데이터의 상태를 수정하기 위한 방법입니다.동작은 유효한 하중을 수신하여 상응하는 상태 수정에 필요한 정보를 제공합니다.
메소드 원형은 다음과 같이 설명할 수 있습니다.

type TActionReturn = void | null | string | string[];

async actionName(payload?: any) => TActionReturn;
async actionName(payload?: any, For?: (...ids: string[]) => Promise<void>) => TActionReturn;

유효 하중은 상태를 업데이트하는 작업에 유용한 모든 정보를 포함하는 객체입니다.For 메서드는 다른 모든 저장소가 현재 저장소가 계속되기 전에 유효 부하 처리를 완료할 수 있도록 합니다.전임자:

async getTravelDetail(payload: TTravel, For: TAwaitFor) {
  await For(priceStore.id);
  this.nextState({
    ...payload,De
    price: priceStore.getState().prices[payload.travelId]
  });
}

nexstate 메서드는 현재 상태를 업데이트하는 데 사용됩니다.기본적으로 상태가 새 값으로 바뀝니다.상태를 부분적으로 업데이트하려면 로고mergeToPreviousState를true로 설정할 수 있습니다.업데이트는 깊이 결합이 아니라 얕은 결합입니다.

// Since we declare the action outside the Store class, 
// we can set the this parameter to set the correct store context 
async setCounterValue(this: TBaseStore<CounterState>, payload: { value: number }) {
  this.nextState(payload);
}

반환 값은 처리가 끝날 때 트리거될 이벤트를 결정합니다.기본적으로 상태의 모든 변경은 All 유형의 이벤트를 트리거합니다.상태 부분이 변경된 경우 특정 이벤트를 트리거할 수 있습니다.서로 다른 조합은 다음과 같다.
가치
효과undefined전 세계의 변화, 우리는 모든 구독자에게 어떠한 변화도 통지한다null변화가 없다. 이것은 어떤 사건도 촉발하는 것을 막을 것이다string선택한 이벤트가 트리거됩니다.string[]선택한 이벤트가 트리거됩니다.
"register Store"방법이 되돌아오는 패키지는 사용자가 정의한 작업과 같은 수량의 조수 방법을 만들 것입니다.그러나 이 외에도 유효 부하를 스케줄러에 직접 전달하는 것도 책임진다.

// So if you have defined this
const _actions = {
  async increase(this: TThis) {
   ...
  },
  async decrease(this: TThis) {
    ...
  },
  async setCounter(this: TThis, payload: { counter: number }) {
    ...
  }
}

// You get that in return
{
  ...
  actions: {
      increase   : () => void                             ;
      decrease   : () => void                             ;
      setCounter : (payload: { counter: number }) => void ;
    }
    ...
}

이벤트

이벤트는 구독자가 구독한 저장 상태의 변경 사항이 업데이트되었음을 알리는 데 사용됩니다.기본적으로 All이라는 글로벌 이벤트가 있으므로 이벤트를 만들 필요가 없습니다.별도의 규정이 없으면 저장소의 모든 변경 사항을 전파합니다.
가입할 각 이벤트의 경우 Dispatcher를 통해 등록하고 스토리지 ID 및 이벤트 이름을 지정해야 합니다."register Store"방법이 되돌아오는 패키지는 사용자가 정의한 이벤트와 같은 수량의 조수 방법을 만들 것입니다.이러한 방법은 저장소 식별자와 이벤트 이름을 전달할 필요가 없고, 스케줄러를 사용할 필요도 없이 직접 구독을 허용할 것이다.
이벤트는 이벤트 이름이 있는 키/값 쌍으로 설명됩니다.

const events = {
  updated  : "updated",
  newEntry : "newEntry"
};

키마다 값을 지정하는 것은 좀 군더더기이기 때문에, 대부분의 경우 이 값이 키와 같을 수 있음을 알기 때문에, withEvents 함수를 사용하여 이 문법을 간소화할 수 있습니다.

const events = withEvents({
  updated  : "",
  newEntry : ""
});

모든 포장 방법은 성명된 모든 이벤트와 자동으로 추가될 모든 이벤트 이후에 생성됩니다.

subscribeTo: {
    All      : ((state: TheStoreState) => void) => { off: () => void };
    updated  : ((state: TheStoreState) => void) => { off: () => void };
    newEntry : ((state: TheStoreState) => void) => { off: () => void };
  }

구독의 반환 값은 공개 오프 방법의 대상입니다.너는 언제든지 구독 취소를 호출할 수 있다.
React Hook 예

React.useEffect(() => {
  const sub = counterStore.subscribeTo.All(_ => setState(_));
  return () => sub.off();
}, []);

store helper 사용하기

조수의 사용은 매우 간단하다.조수만 가져오면 됩니다.

import BlogStore from "./stores/Blog";

상점에 다음과 같은 작업이 있다고 가정합니다.

getLatestArticles

getArticleDetail

사후 통지

다음 이벤트를 제공합니다.

OnGetList

OnGetDetail

OnPostComment

Helper 방법 그룹과 action 방법 그룹이 자동으로 제공됩니다.
동작을 호출하려면 actions의 방법을 사용하고, 이벤트에 대해서는 subscription의 방법을 사용하십시오.

// You can subscribe globally to any change, and update your full state
React.useEffect(() => {
  const sub = BlogStore.subscribeTo.All(state => setState(state));
  // Unsubscribe when unmount 
  return () => sub.off();
})

// You can subscribe specifically to one partial event
React.useEffect(() => {
  const sub = BlogStore.subscribeTo.OnGetList(state => setLatest(state.latest));
  // Unsubscribe when unmount 
  return () => sub.off();
})

지금 동작을 호출하려면 동작 그룹 방법을 사용하면 된다

// You can call easily any action
function Detail() {
  return <>
    <BlogDetail 
      body      = {state.selectedBlog} 
      onComment = { 
        _ => BlogStore.actions.postComment({
          id      : _.id,
          content : _.content
        });
      }/>
  </>;
}

결론

나는 네가 이 게시물을 좋아하길 바란다.
만약 네가 더 알고 싶다면, 여기는 모든 링크이다
Website
Npm
Github
즐기다😄