Redux

Question

में किसी कार्रवाई को रद्द/अनदेखा कैसे करें कोई कार्रवाई रद्द करने या इसे अनदेखा करने का कोई तरीका है?

या इसके बजाय किसी कार्रवाई को अनदेखा करने का सबसे अच्छा/अनुशंसित तरीका क्या है?

मैं निम्नलिखित कार्रवाई निर्माता है और जब मैं इनपुट गलत आकार (माना 'some_string') कार्रवाई निर्माता में, मेरे अपने चेतावनी संदेश प्राप्त करने के अतिरिक्त मैं भी मिलता है: Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

import { SET_SELECTED_PHOTOS_SIZE } from './_reducers'; 

export default (size=0) => { 
    if (!isNaN(parseFloat(size))) { 
    return { 
     type: SET_SELECTED_PHOTOS_SIZE, 
     size: size, 
    }; 
    } else { 
    app.warn('Size is not defined or not a number'); 
    } 
}; 

मैंने कलह (reactiflux) में redux चैनल में इस पर चर्चा की जहां एक सुझाव इस तरह redux-thunk उपयोग करने के लिए किया गया था:

export default size => dispatch => { 
    if (!isNaN(parseFloat(size))) { 
    dispatch({ 
     type: SET_SELECTED_PHOTOS_SIZE, 
     size: size, 
    }); 
    } else { 
    app.warn('Size is not defined or not a number'); 
    } 
} 

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

Answer 1

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

तो वहाँ मूल रूप से इस मुद्दे को हल करने के लिए कैसे दो तरीके हैं:

1. हालत के अंदर कार्रवाई निर्माता और thunk-middleware प्रयोग किया जाता है

   const cancelEdit =() => (dispatch, getState) => { 
       if (!getState().isSaving) { 
       dispatch({type: CANCEL_EDIT}); 
       } 
   } 
   

2. हालत कम करने के अंदर है और कोई मिडलवेयर है आवश्यक

   function reducer(appState, action) { 
       switch(action.type) { 
       case: CANCEL_EDIT: 
       if (!appState.isSaving) { 
        return {...appState, editingRecord: null } 
       } else { 
        return appState; 
       } 
       default: 
       return appState; 
   
       } 
   } 
   

मैं दृढ़ता से वहाँ दो फायदे आदेश के बजाय घटनाक्रम और के रूप में UI इंटरैक्शन के इलाज पसंद करते हैं:

1. सभी आपके डोमेन तर्क तुल्यकालिक शुद्ध reducers जो परीक्षण करने के लिए बहुत आसान है में रहता है। बस कल्पना करें कि आपको कार्यक्षमता के लिए इकाई परीक्षण लिखना होगा।

   const state = { 
       isSaving: true, 
       editingRecord: 'FOO' 
   }; 
   
   // State is not changed because Saving is in progress 
   assert.deepEqual(
       reducer(state, {type: 'CANCEL_EDIT'}), 
       state 
   ); 
   
   // State has been changed because Saving is not in progress anymore 
   assert.deepEqual(
       reducer({...state, isSaving: false}), 
       {isSaving: false, editingRecord: null} 
   ); 
   

आप परीक्षण देख सकते हैं बस जब आपने ईवेंट के रूप बातचीत का इलाज

वास्तव में है

1. क्या होगा यदि आप फैसला किया है कि कार्रवाई को अनदेखा करने के बजाय आप कुछ दृश्य संकेत दिखाएंगे कि कार्रवाई संभव नहीं है? आपको एक और कार्रवाई भेजने या मूल रूप से इसे पुनर्निर्माण करने की आवश्यकता होगी। हालांकि, आप यहां रीप्ले के साथ हॉट-रीलोड का उपयोग नहीं कर सकते हैं क्योंकि एक्शन निर्माता में तर्क पुनः चलाने योग्य नहीं है। यदि तर्क reducer में है, तो आप बस व्यवहार को बदल सकते हैं, reducer गर्म-पुनः लोड हो जाएगा और सभी घटनाओं को फिर से चलाया जाता है। आपके द्वारा प्रेषित एकमात्र घटना यह है कि उपयोगकर्ता ने कुछ बटन क्लिक किए हैं और आप उस तथ्य से इनकार नहीं कर सकते हैं। तो जब तक आप यूआई को भारी रूप से बदल नहीं लेते, तब तक आप हमेशा रीप्ले के साथ हॉट-रीलोड कर सकते हैं।

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