Immer का उपयोग करके React Application Status को मैनेज करना

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



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

ऐसी स्थितियों में, आप इमेर लाइब्रेरी का उपयोग कर सकते हैं। प्रतिक्रिया-अनुप्रयोगों में इसका उपयोग सामग्री के लिए समर्पित है, जिसका अनुवाद आज हम प्रकाशित करते हैं।

प्रतिक्रिया अनुप्रयोगों में Immer का उपयोग करने की मूल बातें

इमेर का उपयोग करते समय, एक रिएक्ट एप्लिकेशन की राज्य संरचना को सरल बनाया जा सकता है, जिसका अर्थ है कि इसके साथ काम करना आसान होगा। Immer तथाकथित "ड्राफ्ट" की अवधारणा का उपयोग करता है। एक "ड्राफ्ट" राज्य की एक प्रति के रूप में लिया जा सकता है, लेकिन राज्य ही नहीं।

Immer, जैसा कि यह था, CMD + C कुंजियों को "दबाकर" राज्य को कॉपी करता है, फिर, CMD + V कुंजियों का उपयोग करते हुए, वह नकल करता है जो उसने ऐसी जगह पर कॉपी किया जहां मूल डेटा को परेशान किए बिना कॉपी किए गए डेटा को देखा जा सकता है। राज्य में शामिल आंकड़ों को बदलना "ड्राफ्ट" में किया जाता है, इसके बाद, "ड्राफ्ट" में किए गए परिवर्तनों के आधार पर, आवेदन की वर्तमान स्थिति को अपडेट किया जाता है।

मान लीजिए कि आपकी एप्लिकेशन स्थिति इस तरह दिखती है:

this.state = {   name: 'Kunle',   age: 30,   city: 'Lagos',   country: 'Nigeria' } 

यहाँ उपयोगकर्ता डेटा है। यह उपयोगकर्ता, जैसा कि यह निकला, अपना 31 वां जन्मदिन मना रहा है। इसका मतलब है कि हमें इसकी आयु ( age संपत्ति) को अपडेट करने की आवश्यकता है। यदि आप इस समस्या को हल करने के लिए Immer का उपयोग करते हैं, तो इस राज्य की एक प्रति पहले बनाई जाएगी।

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

कार्य की ऐसी योजना राज्य प्रतिरक्षा के विचार का उल्लंघन नहीं करती है - वर्तमान स्थिति सीधे अद्यतन नहीं है। सामान्य तौर पर, हम कह सकते हैं कि इममर का उपयोग बस प्रतिरक्षा स्थिति की प्रयोज्य में सुधार करने में मदद करता है।

उदाहरण नंबर 1: ट्रैफिक लाइट

आइए एक उदाहरण पर काम कर रहे एप्लिकेशन पर एक नज़र डालें जो Immer का उपयोग करता है। मान लीजिए आप एक ट्रैफिक लाइट एप्लिकेशन विकसित कर रहे हैं। इस एप्लिकेशन में आप Immer का उपयोग करने का प्रयास कर सकते हैं।

यहां इस एप्लिकेशन की स्क्रीन उसके संचालन के क्षणों में से एक की तरह दिखती है।


ट्रैफिक लाइट एप्लिकेशन

यहां आप प्रोजेक्ट कोड पा सकते हैं।

यहाँ घटक कैसा दिखेगा, यह देखते हुए कि परियोजना Immer का उपयोग करती है।

 const {produce} = immer class App extends React.Component {  state = {    red: 'red',    yellow: 'black',    green: 'black',    next: "yellow"  }  componentDidMount() {    this.interval = setInterval(() => this.changeHandle(), 3000);  }   componentWillUnmount() {    clearInterval(this.interval);  }  handleRedLight = () => {    this.setState(      produce(draft => {        draft.red = 'red';        draft.yellow = 'black';        draft.green = 'black';        draft.next = 'yellow'      })    )  }   handleYellowLight = () => {    this.setState(      produce(draft => {        draft.red = 'black';        draft.yellow = 'yellow';        draft.green = 'black';        draft.next = 'green'      })    )  }   handleGreenLight = () => {    this.setState(      produce(draft => {        draft.red = 'black';        draft.yellow = 'black';        draft.green = 'green';        draft.next = 'red'      })    )  }  changeHandle = () => {    if (this.state.next === 'yellow') {      this.handleYellowLight()    } else if (this.state.next === 'green') {      this.handleGreenLight()    } else {      this.handleRedLight()    }     }  render() {    return (      <div className="box">        <div className="circle" style={{backgroundColor: this.state.red}}></div>        <div className="circle" style={{backgroundColor: this.state.yellow}}></div>        <div className="circle" style={{backgroundColor: this.state.green}}></div>      </div>  ); } }; 

Produce एक मानक फीचर है जो इमर से आयात किया जाता है। हम इसे setState() विधि के मान के रूप में पास करते हैं। produce फ़ंक्शन एक फ़ंक्शन लेता है, जो एक तर्क के रूप में, draft । यह इस फ़ंक्शन के भीतर है कि हम "ड्राफ्ट" स्थिति को संपादित कर सकते हैं, इसे उस रूप में ला सकते हैं जिसे वास्तविक स्थिति में लेना चाहिए।

यदि यह सब आपको बहुत जटिल लगता है - यहाँ कोड लिखने का एक और तरीका है जो उपरोक्त कोड के समान कार्यों को हल करता है। सबसे पहले, एक समारोह बनाएँ:

 const handleLight = (state) => {  return produce(state, (draft) => {    draft.red = 'black';    draft.yellow = 'black';    draft.green = 'green';    draft.next = 'red'  }); } 

फ़ंक्शन का produce करने के produce , हम, तर्कों के रूप में, एप्लिकेशन की वर्तमान स्थिति और draft तर्क को लेने वाले एक अन्य फ़ंक्शन को पास करते हैं। अब घटक में इस सब का लाभ उठाते हैं:

 handleGreenLight = () => {  const nextState = handleLight(this.state)  this.setState(nextState) } 

उदाहरण 2: खरीदारी की सूची

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

हम इमेर की संभावनाओं का पता लगाना जारी रखेंगे, जिससे खरीदारी सूची लागू होती है।


खरीदारी की सूची

यहां आप इसके साथ प्रयोग कर सकते हैं।

यहां वह घटक है जिसके साथ हम काम कर रहे हैं।

 class App extends React.Component {  constructor(props) {      super(props)           this.state = {        item: "",        price: 0,        list: [          { id: 1, name: "Cereals", price: 12 },          { id: 2, name: "Rice", price: 10 }        ]      }    }    handleInputChange = e => {      this.setState(      produce(draft => {        draft[event.target.name] = event.target.value      }))    }    handleSubmit = (e) => {      e.preventDefault()      const newItem = {        id: uuid.v4(),        name: this.state.name,        price: this.state.price      }      this.setState(        produce(draft => {          draft.list = draft.list.concat(newItem)        })      )    };  render() {    return (      <React.Fragment>        <section className="section">          <div className="box">            <form onSubmit={this.handleSubmit}>              <h2>Create your shopping list</h2>              <div>                <input                  type="text"                  placeholder="Item's Name"                  onChange={this.handleInputChange}                  name="name"                  className="input"                  />              </div>              <div>                <input                  type="number"                  placeholder="Item's Price"                  onChange={this.handleInputChange}                  name="price"                  className="input"                  />              </div>              <button className="button is-grey">Submit</button>            </form>          </div>                   <div className="box">            {              this.state.list.length ? (                this.state.list.map(item => (                  <ul>                    <li key={item.id}>                      <p>{item.name}</p>                      <p>${item.price}</p>                    </li>                    <hr />                  </ul>                ))              ) : <p>Your list is empty</p>            }          </div>        </section>      </React.Fragment>    )  } } ReactDOM.render(  <App />,  document.getElementById('root') ); 

सूची में नए शॉपिंग नोट्स जोड़ते समय, हमें उस घटक की स्थिति को अपडेट करने की आवश्यकता होती है जिसमें list सरणी में, नए तत्वों को सहेजा जाना चाहिए। setState() विधि का उपयोग करके list आइटम को अद्यतन करने के list , setState() निम्नलिखित कोड की आवश्यकता होगी:

 handleSubmit = (e) => {  e.preventDefault()  const newItem = {    id: uuid.v4(),    name: this.state.name,    price: this.state.price  }  this.setState({ list: [...this.state.list, newItem] }) }; 

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

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

यहां आप एप्लिकेशन के कोड पर एक नज़र डाल सकते हैं, जिसका हम अब विश्लेषण करेंगे। इसका इंटरफ़ेस नीचे दिखाया गया है।


योजना बनाई खरीद की कुल लागत की गणना के समारोह के साथ आवेदन

तो, मान लें कि हम योजनाबद्ध खरीद के कुल मूल्य की गणना करना चाहते हैं। चलो एक राज्य अद्यतन तंत्र बनाकर शुरू करते हैं। इस तंत्र को handleSubmit फ़ंक्शन द्वारा handleSubmit है:

 handleSubmit = (e) => {  e.preventDefault()  const newItem = {    id: uuid.v4(),    name: this.state.name,    price: this.state.price  }   this.setState(    produce(draft => {      draft.list = draft.list.concat(newItem)    }), () => {      this.calculateAmount(this.state.list)    }  ) }; 

handleSubmit फ़ंक्शन में handleSubmit हम पहले उपयोगकर्ता द्वारा दर्ज किए गए डेटा के आधार पर एक ऑब्जेक्ट बनाते हैं। ऑब्जेक्ट का संदर्भ निरंतर newItem को लिखा जाता है। एक नया अनुप्रयोग स्थिति बनाने के लिए .concat() विधि का उपयोग किया जाता है। यह विधि, जिसे एक सरणी पर कहा जाता है, एक नया सरणी देता है, जिसमें मूल सरणी के तत्व और साथ ही एक नया तत्व शामिल होता है। नया सरणी draft.list को लिखा गया है। उसके बाद, Immer आवेदन की स्थिति को अपडेट कर सकता है।

कॉलबैक, कैलक्युमाउंट फ़ंक्शन, को स्टेट अपडेट के बाद कहा जाता है। यह ध्यान रखना महत्वपूर्ण है कि यह फ़ंक्शन राज्य के एक अद्यतन संस्करण का उपयोग करता है।

calculateAmount फंक्शन इस तरह दिखेगा:

 calculateAmount = (list) => {  let total = 0;    for (let i = 0; i < list.length; i++) {      total += parseInt(list[i].price, 10)    }  this.setState(    produce(draft => {      draft.totalAmount = total    })  ) } 

हुक इम्मर

Use-immer एक हुक है जो एक डेवलपर को रिएक्ट एप्लिकेशन की स्थिति को नियंत्रित करने की अनुमति देता है। आइए देखें कि यह हुक क्लासिक काउंटर एप्लिकेशन को इसके आधार पर कैसे लागू करता है:

 import React from "react"; import {useImmer} from "use-immer"; const Counter = () => {  const [count, updateCounter] = useImmer({    value: 0  });  function increment() {    updateCounter(draft => {      draft.value = draft.value +1;    });  }  return (    <div>      <h1>        Counter {count.value}      </h1>      <br />      <button onClick={increment}>Increment</button>    </div>  ); } export default Counter; 

useImmer फ़ंक्शन उपयोग विधि के समान है। फ़ंक्शन एक स्थिति और एक फ़ंक्शन देता है जो राज्य को अपडेट करता है। जब घटक पहले लोड होता है, तो राज्य की सामग्री (इस मामले में, count संपत्ति) का उपयोग करने के लिए पारित मूल्य से मेल खाती है। राज्य को अद्यतन करने के लिए दिए गए फ़ंक्शन का उपयोग करना हमें एक increment फ़ंक्शन बनाने की अनुमति देता है जो count राज्य संपत्ति के मूल्य में increment करता है।

और यहाँ वह कोड है जो Immer के लिए हुक का उपयोग करता है, उपयोग करने वाले की याद दिलाता है:

 import React, { useRef } from "react"; import {useImmerReducer } from "use-immer"; import uuidv4 from "uuid/v4" const initialState = []; const reducer = (draft, action) => {  switch (action.type) {    case "ADD_ITEM":      draft.push(action.item);      return;    case "CLEAR_LIST":      return initialState;    default:      return draft;  } } const Todo = () => {  const inputEl = useRef(null);  const [state, dispatch] = useImmerReducer(reducer, initialState);   const handleSubmit = (e) => {    e.preventDefault()    const newItem = {      id: uuidv4(),      text: inputEl.current.value    };    dispatch({ type: "ADD_ITEM", item: newItem });    inputEl.current.value = "";    inputEl.current.focus();  }   const handleClear = () => {    dispatch({ type: 'CLEAR_LIST' })  }   return (    <div className='App'>      <header className='App-header'>        <ul>          {state.map(todo => {            return <li key={todo.id}>{todo.text}</li>;          })}        </ul>        <form onSubmit={handleSubmit}>          <input type='text' ref={inputEl} />          <button            type='submit'          >            Add Todo          </button>        </form>        <button          onClick={handleClear}        >          Clear Todos        </button>      </header>    </div>  ); } export default Todo; 

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

Reducer में, हम पहले की तरह उपयोग करते हैं, एक draft इकाई, एक state नहीं। इसके लिए धन्यवाद, हमारे पास एप्लिकेशन की स्थिति का प्रबंधन करने का एक सुविधाजनक तरीका है।

पिछले उदाहरण में इस्तेमाल किया गया कोड यहां पाया जा सकता है ।

परिणाम

इस लेख में, हमने Immer के बारे में बात की, एक पुस्तकालय जो प्रतिक्रिया अनुप्रयोगों की स्थिति के प्रबंधन को सरल करता है। लेख के लेखक का मानना ​​है कि इस पुस्तकालय में रुचि रखने वाले सभी लोग अपने नए अनुप्रयोगों में अच्छी तरह से इमर का उपयोग कर सकते हैं या धीरे-धीरे इसे वर्तमान परियोजनाओं में से एक में पेश कर सकते हैं।

यहां वह सामग्री है जहां आप इमेर के बारे में कुछ विवरण पा सकते हैं।

प्रिय पाठकों! क्या आप Immer का उपयोग करने की योजना बना रहे हैं?