"आपको फ़्लक्स की आवश्यकता होने पर समझ जाएगा। यदि आप सुनिश्चित नहीं हैं कि आपको इसकी आवश्यकता है, तो आपको इसकी आवश्यकता नहीं है।" पीट शिकार

एप्लिकेशन की स्थिति को नियंत्रित करने के लिए, मैं आमतौर पर Redux का उपयोग करता हूं। लेकिन हमेशा एक्शन \ Reducer मॉडल का उपयोग करने की आवश्यकता नहीं है, यदि केवल सरल कार्यात्मक लिखने के लिए इसके आवेदन की श्रमसाध्यता के कारण। उदाहरण के रूप में एक साधारण काउंटर लें। आउटपुट पर, मैं एक सरल और व्यावहारिक समाधान प्राप्त करना चाहता था जो हमें एक राज्य मॉडल और इसे बदलने वाले कुछ तरीकों का वर्णन करने की अनुमति देता है, जैसे कि:

state = {value: 0} increase() { state.value += 1 } decrease() { state.value -= 1 } 

यह तुरंत लगता है कि MobX इस तरह का समाधान प्रदान कर सकता है, तो इसका उपयोग क्यों न करें? कुछ समय के लिए MobX के साथ काम करने के बाद, मैं इस नतीजे पर पहुंचा कि मेरे लिए एक परिवर्तनशील अवस्था (जैसे MobX) के तर्क की तुलना में व्यक्तिगत रूप से अपरिवर्तनीय अवस्थाओं (जैसे Redux) को संचालित करना आसान है, और मैं अपनी आंतरिक रसोई को सरल नहीं कहूँगा।

सामान्य तौर पर, मैं उन्मुक्ति पर आधारित एक सरल राज्य प्रबंधन समाधान खोजना चाहता था, इसे Angular \ React में उपयोग करने की क्षमता के साथ और टाइपस्क्रिप्ट पर लागू किया गया। जीथब खुले स्थानों पर एक त्वरित समीक्षा ने एक उपयुक्त समाधान नहीं दिया, इसलिए चलो RxJS / Immer लें और अपना खुद का प्रयास करें।

हम RxJS का उपयोग करते हैं

हम BehaviorSubjet को एक आधार के रूप में लेंगे, जो राज्य परिवर्तनों के प्रवाह को मॉडल करेगा {value: 0} -> {value: 1} -> {value: 2} और जिसमें एक getValue विधि भी है जिसके साथ आप वर्तमान स्थिति प्राप्त कर सकते हैं। यदि आप Redux के साथ BehaviorSubject API की तुलना करते हैं

• getValue() / getState() //
• subscribe() / subscribe() //
• next(value) / dispatch(action), replaceReducer(nextReducer) //

आप देख सकते हैं कि वे काफी समान हैं। मुख्य अंतर यह है कि BehaviorSubject Action/Reducer बजाय Action/Reducer next() विधि का उपयोग करके नया राज्य सेट किया जा सकता है।

उपरोक्त काउंटर उदाहरण के लिए, एक कार्यान्वयन इस तरह दिख सकता है:

CounterService V1

 class CounterServiceV1 { state = new BehaviorSubject({value: 0}) increase() { this.state.next({value: this.state.value.value + 1}) } decrease() { this.state.next({value: this.state.value.value - 1}) } } 

इस से पुनरावृत्ति की this.state.next और राज्य परिवर्तन की this.state.next हड़ताली हैं। यह वांछित परिणाम स्थिति से बहुत अलग है। state.value += 1

Immer जोड़ें

प्रतिरक्षा स्थिति में परिवर्तन को सरल बनाने के लिए, हम इमेर पुस्तकालय का उपयोग करेंगे। वर्तमान के उत्परिवर्तन के कारण Immer आपको एक नई अपरिवर्तनीय स्थिति बनाने की अनुमति देता है। यह इस तरह से काम करता है:

 const state = {value: 0} //     const draft = createDraft(state) //      draft.value += 1 //    const newState = finishDraft(draft) 

व्यवहार और विषय का बंडल

हमारी ही कक्षा में BehaviorSubject और Immer का उपयोग करें और इसे RxState :

 class RxState<TState> { private subject$: BehaviorSubject<TState> private currentDraft?: Draft<TState> get state() { return this.subject$.value } get state$() { return this.subject$ } get draft(): Draft<TState> { if (this.currentDraft !== undefined) { return this.currentDraft } throw new Error("draft doesn't exists") } constructor(readonly initialState: TState) { this.subject$ = new BehaviorSubject(initialState) } public updateState(recipe: (draft: Draft<TState>) => void) { let topLevelUpdate = false //     updateState if (!this.currentDraft) { this.currentDraft = createDraft(this.state) topLevelUpdate = true } recipe(this.currentDraft) if (!topLevelUpdate) { return } const newState = finishDraft(this.currentDraft, () => {}) as TState this.currentDraft = undefined if (newState !== this.state) { this.subject$.next(newState) } } } 

RxState का उपयोग करते RxState , हम CounterService RxState फिर से लिखते हैं:

काउंटरसेवा V2

 class CounterServiceV2 { state = new RxState({value: 0}) increase() { this.state.updateState(draft => { draft.value += 1 }) } decrease() { this.state.updateState(draft => { draft.value -= 1 }) } } 

 - state = new BehaviorSubject({value: 0}) + state = new RxState({value: 0}) increase() { - this.state.next({value: this.state.value.value + 1}) + this.state.updateState(draft => { + draft.value += 1 + }) } decrease() { - this.state.next({value: this.state.value.value - 1}) + this.state.updateState(draft => { + draft.value -= 1 + }) } 

यह पहले विकल्प की तुलना में थोड़ा बेहतर दिखता है, लेकिन हर बार updateState को कॉल करने की आवश्यकता है। इस समस्या को हल करने के लिए, एक अन्य वर्ग बनाएं और इसे SimpleImmutableStore , यह कहानी का आधार होगा।

 class SimpleImmutableStore<TState> { rxState!: RxState<TState> get draft() { return this.rxState.draft } constructor(initialState: TState) { this.rxState = new RxState<TState>(initialState) } public updateState(recipe: (draft: Draft<TState>) => void) { this.rxState.updateState(recipe) } } 

हम इसकी मदद से स्टोर को लागू करते हैं:

काउंटरस्टोर V1

 class CounterStoreV1 extends SimpleImmutableStore<{value: number}> { constructor(){ super({value: 0}) } increase() { this.updateState(() => { this.draft.value += 1 }) } decrease() { this.updateState(() => { this.draft.value -= 1 }) } } 

 -class CounterServiceV2 { - state = new RxState({value: 0}) +class CounterStoreV1 extends SimpleImmutableStore<{value: number}> { + constructor(){ + super({value: 0}) + } increase() { - this.state.updateState(draft => { - draft.value += 1 + this.updateState(() => { + this.draft.value += 1 }) } decrease() { - this.state.updateState(draft => { - draft.value -= 1 + this.updateState(() => { + this.draft.value -= 1 }) } } 

जैसा कि आप देख सकते हैं, कुछ भी महत्वपूर्ण रूप से नहीं बदला गया है, लेकिन अब सभी तरीकों में एक आवरण के रूप में एक समान कोड है this.updateState । इस दोहराव से छुटकारा पाने के लिए, हम एक फ़ंक्शन लिखते हैं जो एक updateState कॉल में सभी वर्ग विधियों को लपेटता है:

 const wrapped = Symbol() //     function getMethodsNames(constructor: any) { const names = Object.getOwnPropertyNames(constructor.prototype).filter( x => x !== "constructor" && typeof constructor.prototype[x] === "function", ) return names } function wrapMethodsWithUpdateState(constructor: any) { if (constructor[wrapped]) { return } constructor[wrapped] = true for (const propertyName of getMethodsNames(constructor)) { const descriptor = Object.getOwnPropertyDescriptor( constructor.prototype, propertyName, )! const method = descriptor.value descriptor.value = function(...args: any[]) { const store = this as SimpleImmutableStore<any> let result: any store.updateState(() => { //     updateState result = method.call(store, ...args) }) return result } Object.defineProperty(constructor.prototype, propertyName, descriptor) } } 

और हम इसे कंस्ट्रक्टर में कहेंगे (यदि वांछित है, तो यह विधि क्लास के लिए डेकोरेटर के रूप में भी लागू की जा सकती है)

  constructor(initialState: TState ) { this.rxState = new RxState<TState>(initialState) wrapMethodsWithUpdateState(this.constructor) } 

CounterStore

कहानी का अंतिम संस्करण। प्रदर्शित करने के लिए, एक छोटे तर्क को decrease और एक जोड़े को और अधिक तरीकों के साथ setValue पैरामीटर पास करना और setValue अतुल्यकालिक setValue :

 class CounterStore extends SimpleImmutableStore<{ value: number }> { constructor() { super({value: 0}) } increase() { this.draft.value += 1 } decrease() { const newValue = this.draft.value - 1 if (newValue >= 0) { this.draft.value = newValue } } setValue(value: number) { this.draft.value = value } increaseWithDelay() { setTimeout(() => this.increase(), 300) } } 

कोणीय के साथ प्रयोग करें

चूंकि RxJS परिणामी स्टैक का आधार है, इसलिए इसका उपयोग एंगुलर के साथ async पाइप के साथ किया जा सकता है:

 <div *ngIf="store.rxState.state$ | async as state"> <span>{{state.value}}</span> <button (click)="store.increase()">+</button> <button (click)="store.decrease()">-</button> <button (click)="store.setValue(0)">Reset</button> <button (click)="store.increaseWithDelay()">Increase with delay</button> </div> 

डेमो

प्रतिक्रिया के साथ प्रयोग करें

प्रतिक्रिया के लिए, हम एक कस्टम हुक लिखेंगे:

 function useStore<TState, TResult>( store: SimpleImmutableStore<TState>, project: (store: TState) => TResult, ): TResult { const projectRef = useRef(project) useEffect(() => { projectRef.current = project }, [project]) const [state, setState] = useState(projectRef.current(store.rxState.state)) useEffect(() => { const subscription = store.rxState.state$.subscribe(value => { const newState = projectRef.current(value) if (!shallowEqual(state, newState)) { setState(newState) } }) return () => { subscription.unsubscribe() } }, [store, state]) return state } 

अंग

 const Counter = () => { const store = useMemo(() => new CounterStore(), []) const value = useStore(store, x => x.value) return ( <div className="counter"> <span>{value}</span> <button onClick={() => store.increase()}>+</button> <button onClick={() => store.decrease()}>-</button> <button onClick={() => store.setValue(0)}>Reset</button> <button onClick={() => store.increaseWithDelay()}>Increase with delay</button> </div> ) } 

डेमो

निष्कर्ष

परिणाम एक काफी सरल और कार्यात्मक समाधान है, जिसका मैं समय-समय पर अपनी परियोजनाओं में उपयोग करता हूं। यदि आप चाहें, तो आप इस तरफ विभिन्न उपयोगिताएँ जोड़ सकते हैं: मिडलवेयर, स्टेट स्लाइसिंग, अपडेटबैकबैक - लेकिन यह पहले से ही इस लेख के दायरे से परे है। इस तरह के परिवर्धन का परिणाम github https://github.com/simmor-store/simmor पर पाया जा सकता है

मैं किसी भी सुझाव और टिप्पणी के लिए आभारी रहूंगा।