👩🏽‍✈️ 👵🏾 😀 React + IndexDb + ऑटो-अपडेट = लगभग AsyncRedux 🚧 🚴🏿 🤾🏼

इस लेख में, मैं आपको कदम से कदम बताऊंगा कि कैसे ReactJS में लिखी परियोजनाओं में उपयोग के लिए IndexDB (एक डेटाबेस जो किसी भी आधुनिक ब्राउज़र में बनाया गया है) तैयार करना है। परिणामस्वरूप, आप इंडेक्सडीबी से डेटा का उपयोग आसानी से कर सकते हैं जैसे कि यह आपके एप्लिकेशन के Redux स्टोर में था ।

IndexDB एक दस्तावेज़- उन्मुख DBMS है, जो ब्राउज़र की ओर संरचित डेटा की अपेक्षाकृत छोटी राशि (इकाइयों और मेगाबाइट्स के दसियों) के अस्थायी भंडारण के लिए एक सुविधाजनक उपकरण है। जिस मानक कार्य के लिए मुझे IndexDB का उपयोग करना है, उसमें ग्राहक पक्ष पर व्यापार निर्देशिकाओं के डेटा (देशों, शहरों, कोड के आधार पर मुद्राएं, आदि) शामिल हैं। क्लाइंट साइड में उन्हें कॉपी करने के बाद, आप केवल सर्वर (या संपूर्ण - वे छोटे हैं) से इन निर्देशिकाओं से अपडेट डाउनलोड कर सकते हैं और हर बार जब आप ब्राउज़र विंडो खोलते हैं तो ऐसा न करें।

IndexDB का उपयोग करने के लिए गैर-मानक, बहुत विवादास्पद, लेकिन काम करने के तरीके हैं:

सभी व्यावसायिक वस्तुओं के बारे में डेटा को कैशिंग करना ताकि ब्राउज़र साइड पर व्यापक छंटाई और फ़िल्टरिंग क्षमताओं का उपयोग हो
Redux स्टोर के बजाय IndexDB में आवेदन की स्थिति

IndexDB और Redux Store के बीच तीन प्रमुख अंतर हमारे लिए महत्वपूर्ण हैं:

IndexDB एक बाहरी संग्रहण है जिसे पृष्ठ से बाहर निकलते समय साफ़ नहीं किया जाता है। इसके अलावा, यह कई खुले टैब के लिए समान है (जो कभी-कभी कुछ अप्रत्याशित व्यवहार की ओर जाता है)
IndexDB एक पूरी तरह से अतुल्यकालिक DBMS है। सभी ऑपरेशन - खोलना, पढ़ना, लिखना, खोजना - अतुल्यकालिक।
IndexDB JSON में संग्रहीत (तुच्छ तरीके से) नहीं किया जा सकता है और स्नैपशॉट बनाने, डीबग करने में आसानी और अतीत में यात्रा करने के लिए Redux से मस्तिष्क-चालित तकनीकों का उपयोग किया जा सकता है।

चरण 0: कार्य सूची

पहले से ही कार्यों की एक सूची के साथ एक क्लासिक उदाहरण। वर्तमान और एकमात्र घटक की स्थिति में राज्य के भंडारण के साथ भिन्नता

किसी कार्य सूची घटक के घटक राज्य में सूची को संग्रहीत करने का कार्यान्वयन

import React, { PureComponent } from 'react'; import Button from 'react-bootstrap/Button'; import counter from 'common/counter'; import Form from 'react-bootstrap/Form'; import Table from 'react-bootstrap/Table'; export default class Step0 extends PureComponent { constructor() { super( ...arguments ); this.state = { newTaskText: '', tasks: [ { id: counter(), text: 'Sample task' }, ], }; this.handleAdd = () => { this.setState( state => ( { tasks: [ ...state.tasks, { id: counter(), text: state.newTaskText } ], newTaskText: '', } ) ); }; this.handleDeleteF = idToDelete => () => this.setState( state => ( { tasks: state.tasks.filter( ( { id } ) => id !== idToDelete ), } ) ); this.handleNewTaskTextChange = ( { target: { value } } ) => this.setState( { newTaskText: value || '', } ); } render() { return <Table bordered hover striped> <thead><tr> <th>#</th><th>Text</th><th /> </tr></thead> <tbody> { this.state.tasks.map( task => <tr key={task.id}> <td>{task.id}</td> <td>{task.text}</td> <td><Button onClick={this.handleDeleteF( task.id )} type="button" variant="danger"></Button></td> </tr> ) } <tr key="+1"> <td /> <td><Form.Control onChange={this.handleNewTaskTextChange} placeholder="  " type="text" value={this.state.newTaskText || ''} /></td> <td><Button onClick={this.handleAdd} type="button" variant="primary"></Button></td> </tr> </tbody> </Table>; } }

( जीथूब सोर्स कोड )

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

भविष्य में UI के विवरण को नहीं दोहराने के लिए, हम इसे एक अलग कार्यसूची घटक में रखेंगे, जिसका एकमात्र कार्य कार्य सूची का HTML कोड उत्पन्न करेगा। उसी समय, हम सामान्य बटन को बूटस्ट्रैप बटन के चारों ओर एक विशेष आवरण के साथ बदल देंगे, जो बटन को तब तक अवरुद्ध करेगा जब तक कि बटन हैंडलर अपने निष्पादन को पूरा नहीं करता है, भले ही यह हैंडलर एक अतुल्यकालिक फ़ंक्शन हो।

प्रतिक्रिया स्थिति में कार्य सूची को संग्रहीत करने वाले एक घटक को लागू करना

 import React, { PureComponent } from 'react'; import counter from 'common/counter'; import TaskList from '../common/TaskList'; export default class Step01 extends PureComponent { constructor() { super( ...arguments ); this.state = { tasks: [ { id: counter(), text: 'Sample task' }, ] }; this.handleAdd = newTaskText => { this.setState( state => ( { tasks: [ ...state.tasks, { id: counter(), text: newTaskText } ], } ) ); }; this.handleDelete = idToDelete => this.setState( state => ( { tasks: state.tasks.filter( ( { id } ) => id !== idToDelete ), } ) ); } render() { return <> <h1>      </h1> <h2>       </h2> <TaskList onAdd={this.handleAdd} onDelete={this.handleDelete} tasks={this.state.tasks} /> </>; } }

( जीथूब सोर्स कोड )

एक घटक को लागू करना जो कार्यों की एक सूची प्रदर्शित करता है और एक नया जोड़ने के लिए एक फॉर्म होता है

 import React, { PureComponent } from 'react'; import Button from './AutoDisableButtonWithSpinner'; import Form from 'react-bootstrap/Form'; import Table from 'react-bootstrap/Table'; export default class TaskList extends PureComponent { constructor() { super( ...arguments ); this.state = { newTaskAdding: false, newTaskText: '', }; this.handleAdd = async() => { this.setState( { newTaskAdding: true } ); try { //   ,     await this.props.onAdd( this.state.newTaskText ); this.setState( { newTaskText: '' } ); } finally { this.setState( { newTaskAdding: false } ); } }; this.handleDeleteF = idToDelete => async() => await this.props.onDelete( idToDelete ); this.handleNewTaskTextChange = ( { target: { value } } ) => this.setState( { newTaskText: value || '', } ); } render() { return <Table bordered hover striped> <thead><tr> <th>#</th><th>Text</th><th /> </tr></thead> <tbody> { this.props.tasks.map( task => <tr key={task.id}> <td>{task.id}</td> <td>{task.text}</td> <td><Button onClick={this.handleDeleteF( task.id )} type="button" variant="danger"></Button></td> </tr> ) } <tr key="+1"> <td /> <td><Form.Control disabled={this.state.newTaskAdding} onChange={this.handleNewTaskTextChange} placeholder="  " type="text" value={this.state.newTaskText || ''} /></td> <td><Button onClick={this.handleAdd} type="button" variant="primary"></Button></td> </tr> </tbody> </Table>; } }

( जीथूब सोर्स कोड )

पहले से ही नमूना कोड में आप कीवर्ड async / प्रतीक्षा कर सकते हैं। Async / प्रतीक्षारत निर्माण कोड की मात्रा को कम कर सकते हैं जो वादों के साथ काम करता है। प्रतीक्षित कीवर्ड आपको प्रोमिस लौटाने वाले फ़ंक्शन से प्रतिक्रिया की प्रतीक्षा करने की अनुमति देता है, जैसे कि यह एक नियमित फ़ंक्शन था (इसके बजाय तब () में परिणाम की प्रतीक्षा कर रहा है)। बेशक, एक अतुल्यकालिक फ़ंक्शन जादुई रूप से एक सिंक्रोनस में नहीं बदलता है, और, उदाहरण के लिए, निष्पादन थ्रेड को बाधित किया जाएगा जब वेट का उपयोग किया जाता है। लेकिन तब कोड अधिक संक्षिप्त और समझ में आता है, और प्रतीक्षा का उपयोग लूप में और कोशिश / पकड़ने / अंत में निर्माण दोनों में किया जा सकता है।

उदाहरण के लिए, TaskList न केवल TaskList हैंडलर को कॉल करता है, लेकिन यह await कीवर्ड का उपयोग करता है। इस स्थिति में, यदि हैंडलर एक सामान्य फ़ंक्शन है जो कुछ भी नहीं लौटाएगा, या Promise अलावा किसी भी मूल्य को वापस करेगा, तो TaskList घटक बस सामान्य तरीके से handleAdd विधि को जारी रखेगा। लेकिन अगर हैंडलर Promise लौटाता है (यदि हैंडलर को एक async फ़ंक्शन के रूप में घोषित किया जाता है), तो TaskList हैंडलर को निष्पादित करने के लिए इंतजार करेगा, और उसके बाद ही newTaskAdding और newTaskText के मूल्यों को रीसेट करेगा।

चरण 1: प्रतिक्रिया घटक में IndexDB जोड़ें

अपने काम को आसान बनाने के लिए, पहले हम एक सरल घटक लिखेंगे जो निम्नलिखित तरीकों को लागू करता है:

तुच्छ त्रुटि से निपटने के साथ एक डेटाबेस खोलने
डेटाबेस में आइटम के लिए खोज
डेटाबेस में आइटम जोड़ना

पहला सबसे "गैर-तुच्छ" है - 5 इवेंट हैंडलर के रूप में। हालांकि, कोई रॉकेट साइंस नहीं:

OpenDatabasePromise () - एक डेटाबेस खोलें

 function openDatabasePromise( keyPath ) { return new Promise( ( resolve, reject ) => { const dbOpenRequest = window.indexedDB.open( DB_NAME, '1.0.0' ); dbOpenRequest.onblocked = () => { reject( '    ,    , ' + '      .' ); }; dbOpenRequest.onerror = err => { console.log( 'Unable to open indexedDB ' + DB_NAME ); console.log( err ); reject( '   ,       .' + ( err.message ? ' : ' + err.message : '' ) ); }; dbOpenRequest.onupgradeneeded = event => { const db = event.target.result; try { db.deleteObjectStore( OBJECT_STORE_NAME ); } catch ( err ) { console.log( err ); } db.createObjectStore( OBJECT_STORE_NAME, { keyPath } ); }; dbOpenRequest.onsuccess = () => { console.info( 'Successfully open indexedDB connection to ' + DB_NAME ); resolve( dbOpenRequest.result ); }; dbOpenRequest.onerror = reject; } ); }

getAllPromise / getPromise / putPromise - प्रोपर में रैपर IndexDb कॉल

 //    ObjectStore,   IDBRequest //     Promise function wrap( methodName ) { return function() { const [ objectStore, ...etc ] = arguments; return new Promise( ( resolve, reject ) => { const request = objectStore[ methodName ]( ...etc ); request.onsuccess = () => resolve( request.result ); request.onerror = reject; } ); }; } const deletePromise = wrap( 'delete' ); const getAllPromise = wrap( 'getAll' ); const getPromise = wrap( 'get' ); const putPromise = wrap( 'put' ); }

यह सब एक साथ एक IndexedDbRepository वर्ग में लाना

IndexedDbRepository - IDBDatabase के आसपास आवरण

 const DB_NAME = 'objectStore'; const OBJECT_STORE_NAME = 'objectStore'; /* ... */ export default class IndexedDbRepository { /* ... */ constructor( keyPath ) { this.error = null; this.keyPath = keyPath; //     async //      this.openDatabasePromise = this._openDatabase(); } async _openDatabase( keyPath ) { try { this.dbConnection = await openDatabasePromise( keyPath ); } catch ( error ) { this.error = error; throw error; } } async _tx( txMode, callback ) { await this.openDatabasePromise; // await db connection const transaction = this.dbConnection.transaction( [ OBJECT_STORE_NAME ], txMode ); const objectStore = transaction.objectStore( OBJECT_STORE_NAME ); return await callback( objectStore ); } async findAll() { return this._tx( 'readonly', objectStore => getAllPromise( objectStore ) ); } async findById( key ) { return this._tx( 'readonly', objectStore => getPromise( objectStore, key ) ); } async deleteById( key ) { return this._tx( 'readwrite', objectStore => deletePromise( objectStore, key ) ); } async save( item ) { return this._tx( 'readwrite', objectStore => putPromise( objectStore, item ) ); } }

( जीथूब सोर्स कोड )

अब आप IndexDB को कोड से एक्सेस कर सकते हैं:

  const db = new IndexedDbRepository( 'id' ); // ,     await db.save( { id: 42, text: 'Task text' } ); const item = await db.findById( 42 ); const items = await db.findAll();

इस "रिपॉजिटरी" को हमारे घटक से कनेक्ट करें। प्रतिक्रिया के नियमों के अनुसार, सर्वर के लिए कॉल कम्पोनेंटडिमाउंट () विधि में होनी चाहिए:

 import IndexedDbRepository from '../common/IndexedDbRepository'; /*...*/ componentDidMount() { this.repository = new IndexedDbRepository( 'id' ); //     this.repository.findAll().then( tasks => this.setState( { tasks } ) ); }

सैद्धांतिक रूप से, ComponentsDidMount componentDidMount() फ़ंक्शन को async के रूप में घोषित किया जा सकता है, फिर async / प्रतीक्षा निर्माण का उपयोग तब () के बजाय किया जा सकता है। लेकिन फिर भी componentDidMount() "हमारा" फ़ंक्शन नहीं है, लेकिन रिएक्ट द्वारा कहा जाता है। कौन जानता है कि प्रतिक्रिया 17.x लाइब्रेरी undefined बजाय Promise वापस करने के प्रयास के जवाब में कैसे व्यवहार करेगी?

अब निर्माता में, इसे खाली सरणी (या परीक्षण डेटा के साथ एक सरणी) के साथ भरने के बजाय, हम इसे शून्य से भर देंगे। और रेंडर करने में, यह डेटा प्रोसेसिंग के लिए प्रतीक्षा करने की आवश्यकता के रूप में इस अशक्त को संसाधित करेगा। जो लोग चाहते हैं, सिद्धांत रूप में, इसे अलग झंडे में डाल सकते हैं, लेकिन संस्थाओं का उत्पादन क्यों करते हैं?

  constructor() { super( ...arguments ); this.state = { tasks: null }; /* ... */ } /* ... */ render() { if ( this.state.tasks === null ) return <><Spinner animation="border" aria-hidden="true" as="span" role="status" /><span>  ...</span></>; /* ... */ }

यह handleAdd को लागू करने के लिए बनी हुई है / handleDelete :

  constructor() { /* ... */ this.handleAdd = async( newTaskText ) => { await this.repository.save( { id: counter(), text: newTaskText } ); this.setState( { tasks: null } ); this.setState( { tasks: await this.repository.findAll() } ); }; this.handleDelete = async( idToDelete ) => { await this.repository.deleteById( idToDelete ); this.setState( { tasks: null } ); this.setState( { tasks: await this.repository.findAll() } ); }; }

दोनों हैंडलर में, हम पहले एक आइटम को जोड़ने या हटाने के लिए रिपॉजिटरी की ओर मुड़ते हैं, और फिर हम वर्तमान घटक की स्थिति को साफ़ करते हैं और फिर से रिपॉजिटरी से एक नई सूची का अनुरोध करते हैं। ऐसा लगता है कि सेटस्टैट () पर कॉल एक के बाद एक जाएगी। लेकिन हैंडलर की अंतिम पंक्तियों में प्रतीक्षित कीवर्ड दूसरी सेटस्टैट () कॉल का पता लगाने के बाद ही होगा क्योंकि प्रॉमिस () विधि से प्राप्त किया गया है।

चरण 2. परिवर्तनों को सुनें

उपरोक्त कोड में एक बड़ा दोष यह है कि, सबसे पहले, रिपॉजिटरी प्रत्येक घटक में जुड़ा हुआ है। दूसरे, यदि एक घटक रिपॉजिटरी की सामग्री को बदलता है, तो दूसरे घटक को इसके बारे में तब तक पता नहीं चलता है जब तक कि यह किसी भी उपयोगकर्ता की कार्रवाई के परिणामस्वरूप राज्य को फिर से व्यवस्थित नहीं करता है। यह असुविधाजनक है।

इससे निपटने के लिए, हम नए रिपोजिटरी लिस्टनर घटक को पेश करेंगे और इसे दो काम करने देंगे। यह घटक, सबसे पहले, रिपॉजिटरी में परिवर्तन की सदस्यता ले सकेगा। दूसरे, रिपॉजिटरी लिस्टनर उस घटक को सूचित करेगा जिसने इसे इन परिवर्तनों को बनाया था।

सबसे पहले, IndexedDbRepository में हैंडलर्स को पंजीकृत करने की क्षमता जोड़ना:

 export default class IndexedDbRepository { /*...*/ constructor( keyPath ) { /*...*/ this.listeners = new Set(); this.stamp = 0; /*...*/ } /*...*/ addListener( listener ) { this.listeners.add( listener ); } onChange() { this.stamp++; this.listeners.forEach( listener => listener( this.stamp ) ); } removeListener( listener ) { this.listeners.delete( listener ); } }

( जीथूब सोर्स कोड )

हम हैंडलर को एक स्टांप पास करेंगे, जो हर कॉल के साथ onChange () में बदल जाएगा। और हम _tx विधि को संशोधित करते हैं ताकि रीड राइट मोड के साथ लेनदेन में प्रत्येक कॉल के लिए onChange onChange() कॉल किया जाए:

  async _tx( txMode, callback ) { await this.openDatabasePromise; // await db connection try { const transaction = this.dbConnection.transaction( [ OBJECT_STORE_NAME ], txMode ); const objectStore = transaction.objectStore( OBJECT_STORE_NAME ); return await callback( objectStore ); } finally { if ( txMode === 'readwrite' ) this.onChange(); // notify listeners } }

( जीथूब सोर्स कोड )

अगर हम अभी भी then() / catch() का उपयोग प्रॉमिस के साथ काम करने के लिए करते हैं, तो हमें या तो onChange() को कॉल डुप्लिकेट करना होगा, या प्रोमिस () के लिए विशेष पॉलीफ़िल्स का उपयोग करना होगा जो final() समर्थन करते हैं। सौभाग्य से, async / प्रतीक्षा आपको अनावश्यक और बिना किसी कोड के यह करने की अनुमति देती है।

रिपोजिटरी लिस्टर्न घटक स्वयं एक ईवेंट श्रोता को कंपोनेंटडिमाउंट और कंपोनेंटविलाउन्माउंट तरीकों से जोड़ता है:

रिपॉजिटरी लिस्टनर कोड

 import IndexedDbRepository from './IndexedDbRepository'; import { PureComponent } from 'react'; export default class RepositoryListener extends PureComponent { constructor() { super( ...arguments ); this.prevRepository = null; this.repositoryListener = repositoryStamp => this.props.onChange( repositoryStamp ); } componentDidMount() { this.subscribe(); } componentDidUpdate() { this.subscribe(); } componentWillUnmount() { this.unsubscribe(); } subscribe() { const { repository } = this.props; if ( repository instanceof IndexedDbRepository && this.prevRepository !== repository ) { if ( this.prevRepository !== null ) { this.prevRepository.removeListener( this.repositoryListener ); } this.prevRepository = repository; repository.addListener( this.repositoryListener ); } } unsubscribe( ) { if ( this.prevRepository !== null ) { this.prevRepository.removeListener( this.repositoryListener ); this.prevRepository = null; } } render() { return this.props.children || null; } }

( जीथूब सोर्स कोड )

अब, हम अपने मुख्य घटक में रिपॉजिटरी परिवर्तन के प्रसंस्करण को शामिल करेंगे, और, DRY सिद्धांत द्वारा निर्देशित, हम handleAdd / handleDelete से संबंधित कोड को हटा देंगे:

  constructor() { super( ...arguments ); this.state = { tasks: null }; this.handleAdd = async( newTaskText ) => { await this.repository.save( { id: counter(), text: newTaskText } ); }; this.handleDelete = async( idToDelete ) => { await this.repository.deleteById( idToDelete ); }; this.handleRepositoryChanged = async() => { this.setState( { tasks: null } ); this.setState( { tasks: await this.repository.findAll() } ); }; } componentDidMount() { this.repository = new IndexedDbRepository( 'id' ); this.handleRepositoryChanged(); // initial load }

( जीथूब सोर्स कोड )

और हम कनेक्टेड रिपॉजिटरी लिस्टर्न से हैंड्रिपेटरीचार्ज को संभालने के लिए एक कॉल जोड़ते हैं:

  render() { /* ... */ return <RepositoryListener onChange={this.handleRepoChanged} repository={this.repository}> <TaskList onAdd={this.handleAdd} onDelete={this.handleDelete} tasks={this.state.tasks} /> </RepositoryListener>; }

( जीथूब सोर्स कोड )

चरण 3. डेटा को लोड करने और उसके अद्यतन को एक अलग घटक में निकालें

हमने एक घटक लिखा है जो रिपॉजिटरी से डेटा प्राप्त कर सकता है, रिपॉजिटरी में डेटा बदल सकता है। लेकिन अगर आप 100+ घटकों के साथ एक बड़ी परियोजना की कल्पना करते हैं, तो यह पता चलता है कि प्रत्येक घटक जो रिपॉजिटरी से डेटा प्रदर्शित करता है, उसे मजबूर किया जाएगा:

सुनिश्चित करें कि भंडार एकल बिंदु से सही ढंग से जुड़ा हुआ है
ComponentsDidMount componentDidMount() विधि में प्रारंभिक डेटा लोडिंग प्रदान करें
RepositoryListener घटक कनेक्ट करें, जो परिवर्तनों को पुनः लोड करने के लिए हैंडलर कॉल प्रदान करता है

क्या बहुत अधिक डुप्लिकेट क्रियाएं हैं? ऐसा नहीं लगता। और अगर कुछ भूल गया है? कॉपी पेस्ट के साथ खो जाओ?

किसी भी तरह से यह सुनिश्चित करना बहुत अच्छा होगा कि हम एक बार रिपॉजिटरी से कार्यों की सूची प्राप्त करने का नियम लिखते हैं, और कुछ जादुई इन तरीकों को निष्पादित करता है, हमें डेटा देता है, रिपॉजिटरी में प्रक्रियाएं बदलता है, और ढेर के लिए यह इसे कनेक्ट भी कर सकता है भंडार।

 this.doFindAllTasks = ( repo ) => repo.findAll(); /*...*/ <DataProvider doCalc={ this.doFindAllTasks }> {(data) => <span>...   -,   data...</span>} </DataProvider>

इस घटक के कार्यान्वयन में केवल एक ही समय है कि doFindAllTasks () वादा है। अपने काम को सुविधाजनक बनाने के लिए, हम एक अलग घटक बनाएंगे, जो एक परिकलित मूल्य के साथ वंश को निष्पादित करने और कॉल करने के लिए वादे की प्रतीक्षा कर रहा है:

PromiseComponent कोड

 import { PureComponent } from 'react'; export default class PromiseComponent extends PureComponent { constructor() { super( ...arguments ); this.state = { error: null, value: null, }; this.prevPromise = null; } componentDidMount() { this.subscribe(); } componentDidUpdate( ) { this.subscribe(); } componentWillUnmount() { this.unsubscribe(); } subscribe() { const { cleanOnPromiseChange, promise } = this.props; if ( promise instanceof Promise && this.prevPromise !== promise ) { if ( cleanOnPromiseChange ) this.setState( { error: null, value: null } ); this.prevPromise = promise; promise.then( value => { if ( this.prevPromise === promise ) { this.setState( { error: null, value } ); } } ) .catch( error => { if ( this.prevPromise === promise ) { this.setState( { error, value: null } ); } } ); } } unsubscribe( ) { if ( this.prevPromise !== null ) { this.prevPromise = null; } } render() { const { children, fallback } = this.props; const { error, value } = this.state; if ( error !== null ) { throw error; } if ( value === undefined || value === null ) { return fallback || null; } return children( value ); } }

( जीथूब सोर्स कोड )

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

इसके अलावा, बहुत ही जादुई घटक DataProvider अब तक बहुत सरल दिखता है:

 import repository from './RepositoryHolder'; /*...*/ export default class DataProvider extends PureComponent { constructor() { super( ...arguments ); this.handleRepoChanged = () => this.forceUpdate(); } render() { return <RepositoryListener onChange={this.handleRepoChanged} repository={repository}> <PromiseComponent promise={this.props.doCalc( repository )}> {data => this.props.children( data )} </PromiseComponent> </RepositoryListener>; } }

( जीथूब सोर्स कोड )

वास्तव में, हमने रिपॉजिटरी (और अलग-अलग सिंग्लोनटन रिपोजिटरीहोल्डर, जो अब आयात में है) को कॉल किया, जिसे doCalc कहा जाता है, यह हमें कार्य डेटा को इस .props.children में स्थानांतरित करने की अनुमति देगा, और इसलिए, कार्यों की एक सूची तैयार करें। सिंगलेंटन भी सरल दिखता है:

 const repository = new IndexedDbRepository( 'id' ); export default repository;

अब DataProvider कॉल के साथ मुख्य कॉल से डेटाबेस कॉल को बदलें:

 import repository from './RepositoryHolder'; /* ... */ export default class Step3 extends PureComponent { constructor() { super( ...arguments ); this.doFindAllTasks = repository => repository.findAll(); /* ... */ } render() { return <DataProvider doCalc={this.doFindAllTasks} fallback={<><Spinner animation="border" aria-hidden="true" as="span" role="status" /><span>  ...</span></>}> { tasks => <TaskList onAdd={this.handleAdd} onDelete={this.handleDelete} tasks={tasks} /> } </DataProvider>; } }

( जीथूब सोर्स कोड )

यह रुक सकता था। यह बहुत अच्छी तरह से निकला: हम डेटा प्राप्त करने के लिए नियम का वर्णन करते हैं, और एक अलग घटक इस डेटा की वास्तविक प्राप्ति की निगरानी करता है, साथ ही साथ अद्यतन भी करता है। वस्तुतः छोटी-छोटी बातें थीं:

प्रत्येक डेटा अनुरोध के लिए, कोड में कहीं (लेकिन render() विधि में नहीं render() आपको रिपॉजिटरी तक पहुंचने के फ़ंक्शन का वर्णन करने की आवश्यकता है, और फिर इस फ़ंक्शन को डेटाप्रोवाइडर को पास करें
DataProvider के लिए कॉल प्रतिक्रिया की भावना में महान और काफी है, लेकिन JSX के दृष्टिकोण से बहुत बदसूरत है। यदि आपके पास कई घटक हैं, तो विभिन्न DataProviders के घोंसले के शिकार के दो या तीन स्तर आपको बहुत भ्रमित करेंगे।
यह दुखद है कि डेटा प्राप्त करना एक घटक (डेटाप्रोइडर) में किया जाता है, और उनका परिवर्तन दूसरे (मुख्य घटक) में किया जाता है। मैं उसी तंत्र के साथ इसका वर्णन करना चाहूंगा।

चरण 4. कनेक्ट ()

शीर्षक के शीर्षक से प्रतिक्रिया-रिड्यूक्स से परिचित पहले से ही अनुमान लगाया गया है। मैं बाकी के लिए संकेत देगा: यह अच्छा होगा यदि, मापदंडों के साथ बच्चों () को कॉल करने के बजाय, डेटाप्रोवाइडर सेवा घटक नियमों के आधार पर हमारे घटक के गुणों को भर देगा। और अगर रिपॉजिटरी में कुछ बदल गया है, तो यह बस मानक प्रतिक्रिया तंत्र के साथ गुणों को बदल देगा।

इसके लिए हम हायर ऑर्डर कंपोनेंट का उपयोग करेंगे। वास्तव में, यह कुछ भी जटिल नहीं है, यह केवल एक फ़ंक्शन है जो एक घटक वर्ग को एक पैरामीटर के रूप में लेता है और एक और, अधिक जटिल घटक देता है। इसलिए, हमारा कार्य जो हम लिखते हैं वह होगा:

एक तर्क के रूप में घटक वर्ग लें जहां मापदंडों को पारित करना है
नियमों का एक सेट स्वीकार करें, रिपॉजिटरी से डेटा कैसे प्राप्त करें, और इसे किस गुणों में डालें
इसके उपयोग में, यह प्रतिक्रिया-रिडक्स से कनेक्ट () फ़ंक्शन के समान होगा।

इस फ़ंक्शन का कॉल इस तरह दिखाई देगा:

 const mapRepoToProps = repository => ( { tasks: repository.findAll(), } ); const mapRepoToActions = repository => ( { doAdd: ( newTaskText ) => repository.save( { id: counter(), text: newTaskText } ), doDelete: ( idToDelete ) => repository.deleteById( idToDelete ), } ); const Step4Connected = connect( mapRepoToProps, mapRepoToActions )( Step4 );

पहली पंक्तियाँ Step4 घटक के गुण नाम और रिपॉजिटरी से लोड किए जाने वाले मानों के बीच मैपिंग को Step4 हैं। इसके बाद क्रियाओं के लिए मैपिंग आती है: यदि Step4 घटक के भीतर this.props.doDelete(...) this.props.doAdd(...) या this.props.doDelete(...) को कॉल Step4 हैं तो क्या होगा। और अंतिम पंक्ति सब कुछ एक साथ लाती है और कनेक्ट फ़ंक्शन को कॉल करती है। परिणाम एक नया घटक है (यही वजह है कि इस तकनीक को हायर ऑर्डर कंपोनेंट कहा जाता है)। और हम अब मूल Step4 घटक फ़ाइल से निर्यात नहीं करेंगे, लेकिन इसके चारों ओर आवरण:

 /*...*/ class Step4 extends PureComponent { /*...*/ } /*...*/ const Step4Connected = connect( /*...*/ )( Step4 ); export default Step4Connected;

और टास्कलिस्ट के साथ काम करने का घटक अब एक साधारण आवरण की तरह दिखता है:

 class Step4 extends PureComponent { render() { return this.props.tasks === undefined || this.props.tasks === null ? <><Spinner animation="border" aria-hidden="true" as="span" role="status" /><span>  ...</span></> : <TaskList onAdd={this.props.doAdd} onDelete={this.props.doDelete} tasks={this.props.tasks} />; } }

( जीथूब सोर्स कोड )

और वह यह है। कोई निर्माता, कोई अतिरिक्त हैंडलर नहीं - घटक के प्रॉपर में कनेक्ट () फ़ंक्शन द्वारा सब कुछ रखा गया है।

यह देखना बाकी है कि कनेक्ट () फ़ंक्शन को कैसे दिखना चाहिए।

कनेक्ट () कोड

 import repository from './RepositoryHolder'; /* ... */ class Connected extends PureComponent { constructor() { super( ...arguments ); this.handleRepoChanged = () => this.forceUpdate(); } render() { const { childClass, childProps, mapRepoToProps, mapRepoToActions } = this.props; const promises = mapRepoToProps( repository, childProps ); const actions = mapRepoToActions( repository, childProps ); return <RepositoryListener onChange={this.handleRepoChanged} repository={repository}> <PromisesComponent promises={promises}> { values => React.createElement( childClass, { ...childProps, ...values, ...actions, } )} </PromisesComponent> </RepositoryListener>; } } export default function connect( mapRepoToProps, mapRepoToActions ) { return childClass => props => <Connected childClass={childClass} childProps={props} mapRepoToActions={mapRepoToActions} mapRepoToProps={mapRepoToProps} />; }

( जीथुब स्रोत कोड )

कोड भी बहुत जटिल नहीं लगता है ... हालांकि यदि आप डाइविंग शुरू करते हैं, तो सवाल उठेंगे। आपको अंत से पढ़ने की जरूरत है। यह वहाँ है कि connect() फ़ंक्शन परिभाषित है। यह दो पैरामीटर लेता है, और फिर एक फ़ंक्शन देता है जो वापस लौटता है ... फिर से एक फ़ंक्शन? वास्तव में नहीं। props => <Connected... का अंतिम निर्माण props => <Connected... न केवल एक फ़ंक्शन, बल्कि एक कार्यात्मक प्रतिक्रिया घटक देता है । इस प्रकार, जब हम एक पेड़ में कनेक्टेडस्टेप 4 को एम्बेड करते हैं, तो इसमें शामिल होगा:

मूल -> अनाम कार्यात्मक घटक -> कनेक्ट -> रिपोजिटरी लिस्टनर -> प्रोमिसकंपोनेंट -> स्टेप 4

4 इंटरमीडिएट कक्षाओं के रूप में कई, लेकिन प्रत्येक अपना कार्य करता है। एक अनाम घटक फ़ंक्शन के लिए दिए गए मापदंडों को ले जाता है connect(), नेस्टेड घटक का वर्ग, गुण जो घटक को तब ही स्थानांतरित किए जाते हैं जब (प्रॉम्प्स) कहा जाता है और उन्हें पहले से ही घटक को पास कर देता है Connect। घटक Connectपारित मापदंडों Promise(पंक्ति कुंजियों और वादा मूल्यों के साथ एक शब्दकोश वस्तु) से एक सेट प्राप्त करने के लिए जिम्मेदार है । PromisesComponentमूल्यों की गणना प्रदान करता है, उन्हें कनेक्ट घटक में वापस भेज रहा है, जो मूल हस्तांतरित गुणों (प्रॉप्स), परिकलित गुणों (मूल्यों) और गुण-क्रियाओं (क्रियाओं) के साथ मिलकर उन्हें घटक Step4(एक कॉल के माध्यम से React.createElement(...)) तक पहुंचाता है । खैर, घटकRepositoryListenerघटक को अपडेट करता है, अगर कुछ रिपॉजिटरी में बदल गया है तो प्रॉमिस को फिर से शुरू करने के लिए मजबूर करता है।

नतीजतन, यदि कोई भी घटक इंडेक्सडब से रिपॉजिटरी का उपयोग करना चाहता है, तो यह उसके लिए पर्याप्त होगा कि वह एक फ़ंक्शन को जोड़े, connect()संपत्तियों और रिपॉजिटरी से गुण प्राप्त करने के कार्यों के बीच मैपिंग निर्धारित करें, और उनका उपयोग बिना किसी अतिरिक्त सिरदर्द के करें।

चरण 5. @ vlsergey / react-indexdb-repo

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

लाइब्रेरी @ vlsergey / प्रतिक्रिया-वादा - परिणामों को याद रखने के लिए समर्थन के साथ PromiseComponent और PromisesComponent का कार्यान्वयन (ताकि परिवर्तन हमारे लिए दिलचस्प न हों) UI "ट्विच" कम
लाइब्रेरी @ vlsergey / प्रतिक्रिया-indexdb-रेपो - कार्यान्वयन IndexedDbRepository, कनेक्ट () और कुछ उपयोगिता वर्गों में कार्य
टास्क लिस्ट बनाने के लिए इस लाइब्रेरी का उपयोग करने का एक उदाहरण

किसी निष्कर्ष के बजाय: क्या बचा है

उपरोक्त कोड औद्योगिक समाधानों में उपयोग करने के लिए पहले से ही व्यावहारिक है। लेकिन फिर भी, सीमाओं के बारे में मत भूलना:

हमेशा बदलते गुणों से नए वादे नहीं होने चाहिए। यहां आपको संस्मरण फ़ंक्शन का उपयोग करने की आवश्यकता है, लेकिन डेटाबेस परिवर्तन ध्वज को ध्यान में रखें। यह वह जगह है जहाँ IndexedDbRepository से स्टाम्प काम में आता है (हो सकता है कुछ के लिए यह कोड बेमानी लग रहा था)।
आयात के माध्यम से भंडार को जोड़ना, भले ही एक ही स्थान पर हो, गलत है। संदर्भों के उपयोग की ओर देखना आवश्यक है।
, IndexedDB .
: . . IndexDB «» , — .
, IndexDB Redux Storage. IndexDB , .

Online-

React + IndexDb + ऑटो-अपडेट = लगभग AsyncRedux

चरण 0: कार्य सूची

चरण 1: प्रतिक्रिया घटक में IndexDB जोड़ें

चरण 2. परिवर्तनों को सुनें

चरण 3. डेटा को लोड करने और उसके अद्यतन को एक अलग घटक में निकालें

चरण 4. कनेक्ट ()

चरण 5. @ vlsergey / react-indexdb-repo

किसी निष्कर्ष के बजाय: क्या बचा है

More articles: