Redux-Thunk का उपयोग करके अतुल्यकालिक Redux क्रियाएं कैसे करें

अभिवादन हेब्र! मैं आपके लिए लेख का अनुवाद प्रस्तुत करता हूं - Redux Thunk का उपयोग करते हुए अतुल्यकालिक Redux क्रियाएँ , लेखक - Alligator.io

डिफ़ॉल्ट रूप से, Redux क्रियाएं तुल्यकालिक होती हैं, जो एक ऐसे अनुप्रयोग के लिए एक समस्या है जिसे सर्वर API के साथ सहभागिता करने या अन्य अतुल्यकालिक क्रियाएं करने की आवश्यकता होती है। सौभाग्य से, Redux हमें मिडलवेयर जैसी चीज़ मुहैया कराता है, जो एक्शन डिस्पैच और रिड्यूसर के बीच खड़ा होता है। Redux में अतुल्यकालिक कार्यों के लिए दो सबसे लोकप्रिय मिडलवेयर लाइब्रेरी हैं, ये Redux Thunk और Redux Saga हैं । इस पोस्ट में हम पहले पर विचार करेंगे।

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

यदि आप रुचि रखते हैं, तो थंक प्रोग्रामिंग दुनिया में एक अवधारणा है जब एक ऑपरेशन को विलंबित करने के लिए एक फ़ंक्शन का उपयोग किया जाता है।

स्थापना और सेटअप

सबसे पहले, अपने प्रोजेक्ट में Redux-thunk पैकेज जोड़ें:

$ yarn add redux-thunk # ,   npm: $ npm install redux-thunk 

फिर, जब आप Redux द्वारा प्रदान की गई applyMiddleware का उपयोग करके अपने एप्लिकेशन का स्टोर बनाते हैं तो मिडलवेयर जोड़ें:

index.js

 import React from 'react'; import ReactDOM from 'react-dom'; import { createStore, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; import App from './App'; //  applyMiddleware,   thunk middleware   const store = createStore(rootReducer, applyMiddleware(thunk)); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); 

मुख्य उपयोग

आमतौर पर, Redux-Thunk का उपयोग बाह्य API के अतुल्यकालिक अनुरोधों के लिए किया जाता है, डेटा प्राप्त करने या सहेजने के लिए। Redux-Thunk बाहरी एपीआई अनुरोध के "जीवन चक्र" का पालन करने वाले कार्यों को भेजना आसान बनाता है।

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

आइए देखें कि Redux-Thunk का उपयोग करके इसे कैसे लागू किया जा सकता है। घटक में, क्रिया हमेशा की तरह भेजी जाती है:

AddTodo.js

 import { connect } from 'react-redux'; import { addTodo } from '../actions'; import NewTodo from '../components/NewTodo'; const mapDispatchToProps = dispatch => { return { onAddTodo: todo => { dispatch(addTodo(toto)); } }; }; export default connect( null, mapDispatchToProps )(NewTodo); 

कार्रवाई में ही, स्थिति अधिक दिलचस्प है। यहाँ हम अजाक्स अनुरोधों के लिए Axios लाइब्रेरी का उपयोग करेंगे। यदि आपके पास यह स्थापित नहीं है, तो इसे इस तरह जोड़ें:

 # Yarn $ yarn add axios # npm $ npm install axios --save 

हम पते पर एक पोस्ट अनुरोध करेंगे - jsonplaceholder.typicode.com/todos :
क्रियाएँ / index.js

 import { ADD_TODO_SUCCESS, ADD_TODO_FAILURE, ADD_TODO_STARTED, DELETE_TODO } from './types'; import axios from 'axios'; export const addTodo = ({ title, userId }) => { return dispatch => { dispatch(addTodoStarted()); axios .post(`https://jsonplaceholder.typicode.com/todos`, { title, userId, completed: false }) .then(res => { dispatch(addTodoSuccess(res.data)); }) .catch(err => { dispatch(addTodoFailure(err.message)); }); }; }; const addTodoSuccess = todo => ({ type: ADD_TODO_SUCCESS, payload: { ...todo } }); const addTodoStarted = () => ({ type: ADD_TODO_STARTED }); const addTodoFailure = error => ({ type: ADD_TODO_FAILURE, payload: { error } }); 

ध्यान दें कि कैसे हमारे addTodo एक्शन क्रिएटर सामान्य ऑब्जेक्ट एक्शन के बजाय एक फ़ंक्शन देता है। यह फ़ंक्शन स्टोर से प्रेषण तर्क लेता है।

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

जब हम एक एपीआई का उपयोग करते हैं जो वास्तव में बाहरी (रिमोट) है, तो हमारे मामले में JSONPlaceholder की तरह, यह नोटिस करना आसान है कि सर्वर से प्रतिक्रिया आने तक विलंब होता है। लेकिन अगर आप एक स्थानीय सर्वर के साथ काम कर रहे हैं, तो उत्तर बहुत जल्दी आ सकता है, इसलिए आपको देरी की सूचना नहीं होगी। अपनी सुविधा के लिए, आप विकसित होने पर कृत्रिम विलंब जोड़ सकते हैं:

क्रियाएँ / index.js (कोड का टुकड़ा)

 export const addTodo = ({ title, userId }) => { return dispatch => { dispatch(addTodoStarted()); axios .post(ENDPOINT, { title, userId, completed: false }) .then(res => { setTimeout(() => { dispatch(addTodoSuccess(res.data)); }, 2500); }) .catch(err => { dispatch(addTodoFailure(err.message)); }); }; }; 

और एक त्रुटि के साथ स्क्रिप्ट का परीक्षण करने के लिए, आप सीधे एक त्रुटि फेंक सकते हैं:

क्रियाएँ / index.js (कोड का टुकड़ा)

 export const addTodo = ({ title, userId }) => { return dispatch => { dispatch(addTodoStarted()); axios .post(ENDPOINT, { title, userId, completed: false }) .then(res => { throw new Error('NOT!'); // dispatch(addTodoSuccess(res.data)); }) .catch(err => { dispatch(addTodoFailure(err.message)); }); }; }; 

पूर्णता की खातिर, यहाँ एक उदाहरण है कि कैसे हमारे टूडू रिड्यूसर अनुरोध के पूर्ण "जीवन चक्र" को संसाधित करने के लिए देख सकते हैं:

reducers / todoReducer.js

 import { ADD_TODO_SUCCESS, ADD_TODO_FAILURE, ADD_TODO_STARTED, DELETE_TODO } from '../actions/types'; const initialState = { loading: false, todos: [], error: null }; export default function todosReducer(state = initialState, action) { switch (action.type) { case ADD_TODO_STARTED: return { ...state, loading: true }; case ADD_TODO_SUCCESS: return { ...state, loading: false, error: null, todos: [...state.todos, action.payload] }; case ADD_TODO_FAILURE: return { ...state, loading: false, error: action.payload.error }; default: return state; } } 

getState

Redux-Thunk का उपयोग करके अतुल्यकालिक एक्शन क्रिएटर द्वारा लौटाया गया फ़ंक्शन गेटस्टेट विधि को दूसरे तर्क के रूप में भी लेता है, जो आपको सीधे एक्शन क्रिएटर के अंदर स्थिति प्राप्त करने की अनुमति देता है:

क्रियाएँ / index.js (कोड का टुकड़ा)

 export const addTodo = ({ title, userId }) => { return (dispatch, getState) => { dispatch(addTodoStarted()); console.log('current state:', getState()); // ... }; }; 

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

 {loading: true, todos: Array(1), error: null} 

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

क्रियाएँ / index.js (कोड का टुकड़ा)

 export const addTodo = ({ title, userId }) => { return (dispatch, getState) => { const { todos } = getState(); if (todos.length >= 4) return; dispatch(addTodoStarted()); // ... }; }; 

मजेदार तथ्य - क्या आप जानते हैं कि Redux-Thunk कोड में केवल 14 लाइनें हैं? आप अपने लिए जांच सकते हैं कि हुड के नीचे Redux-Thunk मिडलवेयर कैसे काम करता है

मूल लेख का लिंक - Redux Thunk का उपयोग करते हुए अतुल्यकालिक Redux क्रियाएँ ।