जीवन से दुख

शुभ दिन।

क्या आपके पास एक परिचित प्रतिक्रिया डेवलपर भी है जो Redux में दुष्प्रभावों के बारे में आश्चर्यजनक कहानियां बताता है? नहीं! क्या मैं यह व्यक्ति बन सकता हूँ

लेखक ने स्वतंत्रता के बारे में एक परिचयात्मक भाग नहीं लिखने के लिए लिया जो कि redux गाथा पुस्तकालय के बारे में है। उन्हें उम्मीद है कि अपर्याप्त डेटा के मामले में, एक उदार पाठक Habr खोज या आधिकारिक ट्यूटोरियल का उपयोग करेगा। सार को व्यक्त करने के लिए ये उदाहरण बहुत सरल हैं।

तो, मैंने आप सभी को एक साथ क्यों रखा। यह मुकाबला ग्राहकों के खुले स्थानों में रेडक्स गाथा के उपयोग के बारे में होगा। विशेष रूप से, "स्वीकार कार्रवाई => भेजें एपीआई अनुरोध => एक नई कार्रवाई बनाएँ" की तुलना में अधिक जटिल और दिलचस्प मामलों के बारे में।

मुझे साथी नागरिकों द्वारा इस पुस्तकालय के गहन अध्ययन को प्रोत्साहित करने की आशा है, साथ ही साथ यह भी बताया गया है कि कैसे अतुल्यकालिक चीजें अधिक समझने योग्य और अभिव्यंजक बन जाती हैं।

WebSockets

उपयोग का मामला: पुश मॉडल का उपयोग करके वास्तविक समय में सर्वर से उपलब्ध रिक्तियों की सूची के अपडेट प्राप्त करें।

यह निश्चित रूप से, वेब सॉकेट के उपयोग के बारे में है। उदाहरण के लिए, socket.io को लें, लेकिन वास्तव में सॉकेट एपीआई यहां कोई मायने नहीं रखता है।

सगस में चैनल जैसी कोई चीज होती है। यह एक संदेश बस है जिसके माध्यम से घटनाओं का स्रोत अपने उपभोक्ता के साथ संवाद कर सकता है। चैनलों का मुख्य उद्देश्य सागाओं के बीच संचार है और काम के लिए सुविधाजनक संरचना में अतुल्यकालिक घटनाओं की धारा को परिवर्तित करना है।

डिफ़ॉल्ट रूप से, स्टोर redux गाथा के लिए मुख्य ईवेंट चैनल है। घटनाएँ क्रिया के रूप में सामने आती हैं। चैनल का उपयोग स्टोर से नहीं घटनाओं के साथ काम करने के लिए किया जाता है।

यह पता चला है कि चैनल सिर्फ वही है जो आपको सॉकेट से संदेशों की अतुल्यकालिक धारा के साथ काम करने की आवश्यकता है। जितनी जल्दी हो सके चैनल बनाएं!

लेकिन पहले, एक सॉकेट बनाएं:

import io from 'socket.io-client'; export const socket = io.connect('/'); 

अब घटनाओं की एक मामूली सूची घोषित करें:

 export const SocketEvents = { jobsFresh: 'jobs+fresh', }; 

अगला एक चैनल बनाने के लिए एक कारखाना विधि है। कोड सॉकेट से हमें ब्याज की घटनाओं की सदस्यता के लिए एक विधि बनाता है, सदस्यता समाप्त करने के लिए एक विधि और, सीधे, घटना चैनल खुद:

 import { eventChannel } from 'redux-saga'; import { socket } from '../apis/socket'; import { SocketEvents } from '../constants/socket-events'; export function createFreshJobsChannel() { const subscribe = emitter => { socket.on(SocketEvents.jobsFresh, emitter); return () => socket.removeListener(SocketEvents.jobsFresh, emitter); }; return eventChannel(subscribe); } 

चलो एक काफी सरल गाथा लिखते हैं, सॉकेट से अपडेट की प्रतीक्षा कर रहे हैं और उन्हें इसी क्रिया में परिवर्तित कर रहे हैं:

 import { take, call, put } from 'redux-saga/effects'; import { createFreshJobsChannel } from '../channels/fresh-jobs'; import { JobsActions } from '../actions/jobs'; export function * freshJobsSaga() { const channel = yield call(createFreshJobsChannel); while (true) { const jobs = yield take(channel); const action = JobsActions.fresh(jobs); yield put(action); } } 

इसे केवल मूल गाथा से बांधना शेष है:

 import { fork } from 'redux-saga/effects'; import { freshJobsSaga } from './fresh-jobs'; export function * sagas() { yield fork(freshJobsSaga); } 

Google स्थान स्वतः पूर्ण

मामले का उपयोग करें: उपयोगकर्ता के पास अचल संपत्ति के लिए बाद की खोज के लिए उपयोगकर्ता एक भौगोलिक स्थान में प्रवेश करने पर युक्तियां दिखाएं।

वास्तव में, हमें निर्देशांक की आवश्यकता है, और उपयोगकर्ता को वांछित क्षेत्र के मानव-पठनीय नाम की आवश्यकता है।

यह प्रतीत होता है कि यह कार्य बोरिंग "एक्शन => एपीआई => एक्शन" से कैसे भिन्न है? ऑटो-पूर्ण होने की स्थिति में, हम बाहरी संसाधनों के लिए यथासंभव बेकार कॉल करना चाहते हैं, और उपयोगकर्ता को केवल प्रासंगिक संकेत भी दिखा सकते हैं।

सबसे पहले, हम Google स्थान स्वत: पूर्ण सेवा का उपयोग करते हुए एक एपीआई विधि लिखेंगे। यहाँ दिलचस्प बातों में से एक देश के भीतर संकेतों की सीमा है:

 export function getPlaceSuggestions(autocompleteService, countryCode, query) { return new Promise(resolve => { autocompleteService.getPlacePredictions({ componentRestrictions: { country: countryCode }, input: query, }, resolve); }); } 

एक एपीआई विधि है जिसे हम खींचेंगे, आप एक गाथा लिखना शुरू कर सकते हैं। यह बेकार अनुरोधों को स्पष्ट करने का समय है।

माथे में कार्यान्वयन, जब उपयोगकर्ता प्रकार, और हम प्रत्येक परिवर्तन के लिए, पढ़ते हैं - प्रत्येक वर्ण के लिए, एपीआई के लिए एक अनुरोध भेजें - कहीं नहीं जाता है। जब उपयोगकर्ता टाइप कर रहा होता है, तो उसे संकेत की आवश्यकता नहीं होती है। लेकिन जब वह रुक जाता है, तो उसकी सेवा करने का समय आ जाता है।

इसके अलावा, हम ऐसी स्थिति में नहीं रहना चाहेंगे जहां उपयोगकर्ता ने कुछ टाइप किया हो, रुक गया हो, एपीआई अनुरोध चला गया हो, उपयोगकर्ता को कुछ टाइप किया गया था, दूसरा अनुरोध चला गया था।

इस प्रकार, हमने दो अनुरोधों के बीच एक दौड़ बनाई। घटनाएं दो तरह से विकसित हो सकती हैं और दोनों बहुत सुखद नहीं हैं।

उदाहरण के लिए, एक अप्रासंगिक अनुरोध वर्तमान से पहले समाप्त हो जाएगा और एक पल के लिए उपयोगकर्ता अप्रासंगिक संकेतों को देखेगा। अप्रिय, लेकिन महत्वपूर्ण नहीं।

या, वर्तमान अनुरोध अप्रासंगिक एक की तुलना में पहले समाप्त हो जाता है और उपयोगकर्ता को ब्लिंक करने के बाद उसी अप्रासंगिक संकेतों के साथ रहेगा। यह पहले से ही महत्वपूर्ण है।

बेशक, हम इस तरह की समस्या का सामना करने वाले पहले नहीं हैं और बहस के रूप में जानी जाने वाली तकनीक से हमें मदद मिलेगी - अंतिम घटना के बाद एन समय की इकाइयों के बाद ही कार्य निष्पादन। यहाँ इस बारे में थोड़ी सामग्री है।

Redux गाथा में, इस तकनीक को दो प्रभावों का उपयोग करके कार्यान्वित किया जाता है - विलंब और लेटलैस्ट । पहले एक मिलिसेकंड की निर्दिष्ट संख्या द्वारा गाथा के निष्पादन को स्थगित कर देता है। दूसरा एक नई घटना आने पर पहले से ही काम कर रही गाथा के निष्पादन में बाधा डालता है।

यह सब जानते हुए, हम एक गाथा लिखेंगे:

 import { delay } from 'redux-saga'; import { put, call, select } from 'redux-saga/effects'; import { PlaceActions } from '../actions/place'; import { MapsActions } from '../actions/maps'; import { getPlaceSuggestions } from '../api/get-place-suggestions'; export function placeSuggestionsSaga * ({ payload: query }) { const { maps: { isApiLoaded } } = yield select(); //  API    , //      if (!isApiLoaded) { yield take(MapsActions.apiLoaded); } //     Google Places Autocomplete  store const { maps: { autocompleteService }, countryCode } = yield select(); //    , //        if (query) { yield put(PlaceActions.suggestions([])); yield put(PlaceActions.select(null)); return; } //  250    yield call(delay, 250); //  API  const suggestions = yield call( getPlaceSuggestions, autocompleteService, countryCode, query, ); //  action   const action = PlacesActions.suggestions(suggestions || []); //     store yield put(action); }; 

पिछले उदाहरण की तरह, यह केवल इसे मूल गाथा से बांधने के लिए बनी हुई है:

 import { takeLatest } from 'redux-saga/effects'; import { PlaceActions } from '../actions/place'; import { placeSuggestionsSaga } from './place-suggestions'; export function * sagas() { yield takeLatest( PlaceActions.changeQuery, placeSuggestionsSaga, ); } 

ड्रॉपडाउन करीब

मामले का उपयोग करें: नियंत्रण के क्षेत्र के बाहर क्लिक करने पर स्व-लिखित ड्रॉप-डाउन सूची बंद करें।

वास्तव में, यह ब्राउज़र चयन में निर्मित व्यवहार का अनुकरण है। जिन कारणों से आपको divs पर लिखी गई ड्रॉप-डाउन सूची की आवश्यकता हो सकती है, उन्हें पाठक की कल्पना के लिए छोड़ दिया जाएगा।

हल किए जा रहे कार्य की एक प्रमुख विशेषता नियंत्रण से बाहर की घटना है, उदाहरण के लिए, सूची के बाहर क्लिक करते समय।

आप अनुमान लगाया? हां, यहां चैनल भी हमारी मदद करेंगे। उनका उपयोग करते हुए, हम उन घटनाओं को क्लिक करेंगे, जो पॉप अप करने के लिए इसी क्रिया में पॉप अप करते हैं।

एक कारखाना तरीका अच्छा होगा जो एक मनमाना खिड़की घटना के लिए चैनल बनाता है। और यहाँ वह है:

 import { eventChannel } from 'redux-saga'; export function createWindowEventChannel(eventName) { const subscribe = emitter => { window.addEventListener(eventName, emitter); return () => window.removeEventListener(eventName, emitter); }; return eventChannel(subscribe); } 

हम पहले उदाहरण के समान एक गाथा बनाते हैं (यदि आप चाहें तो उनके लिए एक कारखाना विधि बना सकते हैं):

 import { take, put, call } from 'redux-saga/effects'; import { createWindowEventChannel } from '../channels/window-event'; import { DropdownActions } from '../actions/dropdown'; export function * closeDropdownsSaga() { const channel = yield call(createWindowEventChannel, 'onClick'); while (true) { const event = yield take(channel); const action = DropdownActions.closeAll(event); yield put(action(event)); } } 

इच्छुक reducers नियंत्रण को बंद अवस्था में रखेंगे:

 import { handleActions } from 'redux-actions'; import { DropdownActions } from '../actions/dropdown'; export const priceReducer = handleActions({ ..., [DropdownActions.closeAll]: state => ({ ...state, isOpen: false}), }, {}); 

ड्रॉप-डाउन सूची में ही किसी भी आंतरिक भाग पर क्लिक इवेंट के प्रचार को रोकना होगा और समापन कार्यक्रम को स्वतंत्र रूप से स्टोर पर भेजना होगा। उदाहरण के लिए, जब आप खोलने के लिए क्लिक करते हैं:

 // components/dropdown.js import React from 'react'; export class Dropdown extends React.Component { ... __open(event) { event.stopPropagation(); this.props.open(); } } // dispatchers/open-price-dropdown.js import { DropdownActions } from '../actions/dropdown'; import { PriceActions } from '../actions/price'; export const openPriceDropdownDispatcher = dispatch => () => { dispatch( DropdownActions.closeAll() ); dispatch( PriceActions.open() ); }; 

अन्यथा, सूची बस नहीं खुलेगी। विकल्प का चयन करते समय क्लिक पर भी यही बात लागू होती है।

एल क्लैसिको, गाथा माउंट करें:

 import { fork } from 'redux-saga/effects'; import { closeDropdownsSaga } from './close-dropdowns'; export function * sagas() { yield fork(closeDropdownsSaga); } 

सूचनाएं

मामले का उपयोग करें: यदि टैब पृष्ठभूमि में है, तो नई रिक्तियों की उपलब्धता के बारे में ब्राउज़र सूचनाएं दिखाएं।

सक्रिय टैब में, उपयोगकर्ता एक विशेष नियंत्रण में परिवर्तन देखेंगे और इसलिए सूचनाएं उचित नहीं हैं। लेकिन पृष्ठभूमि के लिए टैब काम आ सकता है। बेशक, उपयोगकर्ता की अनुमति के साथ!

मैं टैब पर जाने और नई रिक्तियों को दिखाने के लिए अधिसूचना पर क्लिक करना चाहूंगा। यदि उपयोगकर्ता जवाब नहीं देता है, तो अधिसूचना को बंद करें। ऐसा करने के लिए, हमें एक और उपयोगी प्रभाव की आवश्यकता है - दौड़ । यह आपको कई अन्य प्रभावों के बीच दौड़ की व्यवस्था करने की अनुमति देता है। ज्यादातर मामलों में, दौड़ का उपयोग कुछ ऑपरेशन के लिए एक टाइमआउट प्रदान करने के लिए किया जाता है।

पिछले उदाहरण से क्लिक अवरोधन कोड के साथ पहचान के कारण, हम टैब की गतिविधि को ट्रैक करने के लिए कोड को छोड़ देते हैं।

हम एक फ़ैक्टरी विधि लिखेंगे जो सूचनाएं प्राप्त करने के लिए उपयोगकर्ता से अनुमोदन के लिए अनुरोध करने के लिए एक चैनल बनाएगी:

 import { eventChannel, END } from 'redux-saga'; export function createRequestNotificationPermissionChannel() { const subscribe = emitter => { Notification.requestPermission(permission => { emitter(permission); emitter(END); }); return () => {}; }; return eventChannel(subscribe); } 

एक अन्य कारखाने विधि की खोज में, लेकिन एक अधिसूचना प्राप्त करने के लिए चैनल के साथ:

 import { eventChannel, END } from 'redux-saga'; export function createNotificationClickChannel(notification) { const subscribe = emitter => { notification.onclick = event => { emitter(event); emitter(END); }; return () => notification.onclick = null; }; return eventChannel(subscribe); } 

दोनों चैनल एक ही कार्यक्रम में एकल-उपयोग और अधिकतम शूटिंग हैं, जिसके बाद वे बंद हो जाते हैं।

कुंजी बनी हुई है - तर्क के साथ गाथा। जांचें कि क्या टैब सक्रिय है, अनुमति का अनुरोध करें, एक अधिसूचना बनाएं, एक क्लिक या टाइमआउट की प्रतीक्षा करें, नई रिक्तियों को दिखाएं, टैब को सक्रिय करें और फिर अधिसूचना को बंद करें:

 import { delay } from 'redux-saga'; import { call, select, race, take } from 'redux-saga/effects'; import { createRequestNotificationPermissionChannel } from '../channels/request-notification-permission'; import { createNotificationClickChannel } from '../channels/notification-click'; import { JobsActions } from '../actions/jobs'; export function * notificationsSaga(action) { const { inFocus } = yield select(); if (inFocus) return; const permissionChannel = yield call(createRequestNotificationPermissionChannel); const permission = yield take(permissionChannel); if (permission !== 'granted') return; const notification = new Notification( `You have ${action.payload.jobs.length} new job posts`, { icon: 'assets/new-jobs.png' } ); const clickChannel = yield call(createNotificationClickChannel, notification); const { click, timeout } = yield race({ click: take(clickChannel), timeout: call(delay, 5000), }); if (click) { yield put(JobsActions.show()); window.focus(); window.scrollTo(0, 0); } notification.close(); } 

इस सुविधा का पता लगाने से पहले गाथा को माउंट करें:

 import { takeEvery } from 'redux-saga/effects'; import { JobsActions } from '../actions/jobs'; import { notificationsSaga } from './notifications'; export default function * sagas() { if ( 'Notification' in window && Notification.permission !== 'denied' ) { yield takeEvery(JobsActions.fresh, notificationsSaga); } } 

ग्लोबल इवेंट बस

मामले का उपयोग करें: Redux- स्टोर के बीच घटनाओं की निर्दिष्ट श्रेणी को स्थानांतरित करें

यदि सामान्य डेटा वाले कई एप्लिकेशन पृष्ठ पर मौजूद हैं, तो ऐसी बस आवश्यक है। इसी समय, अनुप्रयोगों को एक-दूसरे से स्वतंत्र रूप से लागू किया जा सकता है।

उदाहरण के लिए, फ़िल्टर के साथ एक खोज स्ट्रिंग और अलग प्रतिक्रिया अनुप्रयोगों के रूप में खोज परिणाम। फ़िल्टर बदलते समय, मैं चाहता हूं कि परिणाम एप्लिकेशन को इसके बारे में जानना चाहिए कि क्या यह पृष्ठ पर भी है।

हम मानक इवेंट एमिटर का उपयोग करते हैं:

 import EventEmmiter from 'events'; if (!window.GlobalEventBus) { window.GlobalEventBus = new EventEmmiter(); } export const globalEventBus = window.GlobalEventBus; 

पहले से ही प्रिय घटनाचैनल एक चैनल में एक मानक एमिटर बदल जाता है:

 import { eventChannel } from 'redux-saga'; import { globalEventBus as bus } from '../utils/global-event-bus'; exports function createGlobalEventBusChannel() { const subscribe = emitter => { const handler = event => emitter({ ...event, external: true }); bus.on('global.event', handler); return bus.removeListener('global.event', handler); }; return eventChannel(subscribe); } 

गाथा काफी सरल है - हम एक चैनल बनाते हैं और घटनाओं को आंतरिक या बाहरी रूप से स्वीकार करते हैं। यदि हमें कोई आंतरिक घटना प्राप्त हुई है, तो इसे बस में भेजें, यदि बाहरी एक - स्टोर में:

 import { take, put, race, call } from 'redux-saga/effects'; import { globalEventBus as bus } from '../utils/global-event-bus'; import { createGlobalEventBusChannel } from '../channels/global-event-bus'; export function * globalEventBusSaga(allowedActions) { allowedActions = allowedActions.map(x => x.toString()); const channel = yield call(createGlobalEventBusChannel); while (true) { const { local, external } = yield race({ local: take(), external: take(channel), }); if ( external && allowedActions.some(action => action === external.type) ) { yield put(external); } if ( local && !local.external && allowedActions.some(action => action === local.type) ) { bus.emit('global.event', local); } } }; 

और अंतिम एक - आवश्यक घटनाओं के साथ गाथा बढ़ते:

 import { fork } from 'redux-saga/effects'; import { globalEventBusSaga } from './global-event-bus'; import { DropdownsActions } from '../actions/dropdowns'; import { AreasActions } from '../actions/areas'; export function * sagas() { yield fork(globalEventBusSaga, [ DropdownsActions.closeAll, AreasActions.add, AreasActions.remove, ... ]); } 

मुझे आशा है कि यह दिखाने में सक्षम है कि सागा जटिल दुष्प्रभावों का वर्णन करना आसान बनाते हैं। लाइब्रेरी एपीआई का पता लगाएं, अपने मामलों में स्थानांतरण करें, घटना की अपेक्षा के जटिल पैटर्न बनाएं और खुश रहें। जेएस खुली जगहों पर मिलते हैं!