MiniRx 도입-확장 가능한 반응 상태 관리
안녕하세요, 미니 Rx 상점에서 왔습니다.
MiniRx 스토어는 수동 상태 관리 영역의 새 구성원입니다.MiniRx는 대규모 상태 관리(Redux 사용)를 돕지만 간단한 상태 관리 형식인 기능 저장소를 제공합니다.
빠르게 살펴보겠습니다.
글로벌
MiniRx Store는 JavaScript 및 TypeScript 애플리케이션의 상태를 관리하는 전 세계적인 애플리케이션 범위 솔루션입니다.
반응성
미니Rx는 RxJS에 전기를 공급하고 RxJS가 관측할 수 있는 방식으로 상태를 노출한다.관찰 대상의 선택 상태가 변할 때 신호를 보냅니다.
신축 가능
MiniRx는 성숙한 Redux 상점입니다. 조작, 감축기, 메타감축기, 메모리 선택기, Redux 개발 도구 지원을 포함합니다.
그러나 MiniRx 기능 상점이 있으면 Redux 템플릿을 돌아갈 수 있습니다: 직접
setState 업데이트 상태를 사용할 수 있습니다.MiniRx는 주 관리 요구 사항을 완벽하게 충족합니다.
빠른 링크
MiniRx DNA
NgRx
미니Rx의 영감NgRx은 Angular로 세계적으로 유명한 리액션 레드ux 상점이다.MiniRx와 NgRx는 언뜻 보기에는 비슷하지만 중요한 차이점이 있다.
NgRx와 MiniRx의 공통점은 무엇입니까?
주요 차이점은 무엇입니까?
MiniRx인 이유
NgRx 및 Redux 모드는 대규모 관리 상태에 적합합니다.그러나 거의 모든 응용 프로그램은 간단한 형태의 상태 관리 기능만 포함한다.그리고 Redux 모드와 그 조작과 감축기는 곧 지나친 느낌을 줄 것이다.NgRx처럼 보이는 상태 관리 솔루션이 있다면 다행이지만 간단한 상태 관리: 신축 가능한 상태 관리도 지원해야 한다.창조할 때MiniRx Store:
기능 저장소를 사용하여 Redux 템플릿 무시
MiniRx는 Redux 모드를 사용하여 상태 관리를 명확하고 예측 가능하게 합니다.Redux 모드는 매우 강력하지만, 일부 샘플 코드 (주로 조작, 감축기, 분배 조작) 를 덧붙인다.MiniRx는 Redux 템플릿을 돌아서 간단한 기능 상태를 얻을 수 있습니다. 기능 저장소를 통해 우리는 기능 상태를 직접 관리할 수 있고, 조작과 축소기를 사용하지 않아도 됩니다.
setState 기능 상태를 업데이트할 수 있습니다.확장 가능한 상태 관리
간단한 기능에 대해 우리는 기능 저장소를 사용할 수 있다.기능 저장소는 실제로 매우 강력하다. 메모리 선택기를 사용할 수 있고, API 호출을 위한 효과를 만들 수 있다. (원한다면.)MiniRx는 고객의 요구를 충족시킬 수 있습니다.
방대하고 복잡한 상태를 관리해야 하는 경우 언제든지 Redux API를 사용할 수 있습니다.
프레임 불가지론
NgRx는 매우 좋은 반응 저장소이지만, 현재는 각도만 적용된다.예를 들어 Svelte도 반응성을 지원한다.날씬한 곳에서 NgRx 스타일의 컨디션 관리를 하면 멋집니다!
MiniRx가 있으면 원하는 프레임워크를 사용할 수 있습니다. Angular today에 프레임워크와 무관한 상태 관리층을 구축하고 내일 Svelte (또는 다른 전단 프레임워크) 로 이동할 수 있습니다.
MiniRx 주요 개념
setState와 함께 사용하기로 결정할 수 있습니다.setState(기능 저장소 API)이것은 긴 소개다!MiniRx의 작동 상황을 살펴보기 위해 몇 가지 코드를 자세히 살펴보겠습니다...
기본 자습서
스토어(Redux API)
MiniRx는 복원 및 스케줄링 작업을 등록할 수 있는 레거시 Redux API를 지원합니다.
상태를 관찰할 수 있는 것은 기억 선택기를 통해 선택할 수 있다.
import {
Action,
Store,
configureStore,
createFeatureSelector,
createSelector
} from 'mini-rx-store';
import { Observable } from 'rxjs';
// 1.) State interface
interface CounterState {
count: number;
}
// 2.) Initial state
const counterInitialState: CounterState = {
count: 1
};
// 3.) Reducer
function counterReducer(
state: CounterState = counterInitialState,
action: Action
): CounterState {
switch (action.type) {
case 'inc':
return {
...state,
count: state.count + 1
};
default:
return state;
}
}
// 4.) Get hold of the store instance and register root reducers
const store: Store = configureStore({
reducers: {
counter: counterReducer
}
});
// 5.) Create memoized selectors
const getCounterFeatureState = createFeatureSelector<CounterState>('counter');
const getCount = createSelector(
getCounterFeatureState,
state => state.count
);
// 6.) Select state as RxJS Observable
const count$: Observable<number> = store.select(getCount);
count$.subscribe(count => console.log('count:', count));
// 7.) Dispatch an action
store.dispatch({ type: 'inc' });
// OUTPUT: count: 1
// OUTPUT: count: 2
기능 스토리지 API
기능 저장소는 조작과 축소기를 사용하지 않고 기능 상태를 관리할 수 있도록 해 준다.
기능 저장소의 API는 최소한의 템플릿 파일로 기능 상태를 직접 선택하고 업데이트할 수 있도록 최적화되었습니다.
import { FeatureStore } from 'mini-rx-store';
import { Observable } from 'rxjs';
// 1.) State interface
interface CounterState {
count: number;
}
// 2.) Initial state
const counterInitialState: CounterState = {
count: 11
};
export class CounterFeatureStore extends FeatureStore<CounterState> {
// Select state as RxJS Observable
count$: Observable<number> = this.select(state => state.count);
constructor() {
super('counterFs', counterInitialState);
}
// Update state with `setState`
inc() {
this.setState(state => ({ ...state, count: state.count + 1 }));
}
}
import { CounterFeatureStore } from "./counter-feature-store";
const counterFs = new CounterFeatureStore();
counterFs.count$.subscribe(count => console.log('count:', count));
counterFs.inc();
// OUTPUT: count: 11
// OUTPUT: count: 12
요소 저장 상태가 전역 상태의 일부가 되다
각 새로운 기능 스토어에는 전역 상태에서 해당 기능 키(예: "counterFs")가 표시됩니다.
store.select(state => state).subscribe(console.log);
//OUTPUT: {"counter":{"count":2},"counterFs":{"count":12}}
필기
데모
🚀 StackBlitz의 MiniRx 스토어 참조
Redux API 및 기능 스토리지를 사용하는 데모:
추가 MiniRx 예:
MiniRx의 강력한 기능을 보여주는 이 인기 분야 프레젠테이션은 다음과 같습니다.
문서
전체 MiniRx API를 보십시오docs.
지지 를 표시하다
미니Rx를 좋아한다면 해봐⭐ onGitHub
도구책
이러한 프로젝트, 기사 및 교육 과정을 통해 MiniRx를 만들 수 있습니다.
Reference
이 문제에 관하여(MiniRx 도입-확장 가능한 반응 상태 관리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/spierala/introducing-minirx-scalable-reactive-state-management-d7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
