एक्सिस के साथ रेडक्स-वादा, और त्रुटियों से कैसे निपटें?

Question

तो, मैं एक त्रुटि पर देखता हूं, रेडक्स-वादा मुझे वापस त्रुटि देता है: सत्य, पेलोड के साथ, लेकिन यह एक बार यह reducer हिट करता है ... मेरे लिए, अनुरोध decoupling और त्रुटि की स्थिति थोड़ा अजीब है, और अनुचित लगता है। क्या .. एक प्रभावी तरीका जब Axios डब्ल्यू/reduc वादा (मिडलवेयर) का उपयोग भी त्रुटि स्थिति से निपटने के लिए है यहाँ मैं क्या है का सार है ..

in action/ 
const request = axios(SOME_URL); 

return { 
    type: GET_ME_STUFF, 
    payload: request 
} 

in reducer/ 
    const startState = { 
    whatever: [], 
    error: false 
    } 

    case GET_ME_STUFF: 
    return {...state, startState, {stuff:action.payload.data, error: action.error? true : false}} 

आदि ... तो मैं के साथ सौदा कर सकते हैं त्रुटि .. तो, मेरी एपीआई कॉल अब दो अलग-अलग क्षेत्रों में विभाजित है और यह गलत लगता है .... मुझे कुछ याद आ रहा है। मैं उन कार्यों में सोचूंगा जो मैं एक कॉलबैक में पास कर सकता हूं जो एक नई कार्रवाई आदि को संभालता है .. या कुछ, लेकिन इसे विभाजित नहीं करता है।

Answer 1

मुझे इसी तरह की स्थिति से गुजरना पड़ा। चुनौती यह है कि आप संभवतः वादे के परिणामों का मूल्यांकन करने में सक्षम नहीं होंगे जब तक कि यह reducer पर न हो। आप अपने अपवादों को संभाल सकते हैं लेकिन यह सबसे अच्छा पैटर्न नहीं है। जो मैंने पढ़ा है, उससे reducers केवल कार्रवाई के आधार पर राज्य के उचित टुकड़े वापस करने के लिए हैं। टाइप करें और कुछ और नहीं करें।

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

यह http://danmaz74.me/2015/08/19/from-flux-to-redux-async-actions-the-easy-way/ पर काफी अच्छी तरह से समझाया गया है, अनिवार्य रूप से, आप वादे के परिणाम को reducers हिट करने से पहले यहां अन्य वादे रचनाकारों के माध्यम से वादे का मूल्यांकन कर सकते हैं।

अपनी क्रिया फ़ाइल में, अतिरिक्त क्रिया निर्माता जोड़ें जो सफलता और त्रुटि (और किसी अन्य) राज्यों को संभालेगा।

function getStuffSuccess(response) { 
    return { 
    type: GET_ME_STUFF_SUCCESS, 
    payload: response 
    } 
} 

function getStuffError(err) { 
    return { 
    type: GET_ME_STUFF_ERROR, 
    payload: err 
    } 
} 

export function getStuff() { 
    return function(dispatch) { 
    axios.get(SOME_URL) 
     .then((response) => { 
     dispatch(getStuffSuccess(response)) 
     }) 
     .catch((err) => { 
     dispatch(getStuffError(err)) 
     }) 
    } 
} 

return null 

यह मोटे तौर पर है कि आप लिंक पर बताए गए अनुसार अपने छद्म कोड का अनुवाद कैसे कर सकते हैं। यह सीधे आपके एक्शन निर्माता में वादे का मूल्यांकन करता है और आपके रेड्यूसर को उचित क्रियाओं और पेलोडों को फायर कर देता है जो कार्रवाई -> reducer -> state -> घटक अद्यतन चक्र के सम्मेलन का पालन करता है। मैं अभी भी प्रतिक्रिया/रेडक्स खुद के लिए बहुत नया हूं लेकिन मुझे आशा है कि इससे मदद मिलती है।

Answer 2

रेडक्स-वादा का उपयोग न करें। यह ऐसा कुछ ओवरकप्लिकेट करता है जो वास्तव में स्वयं को करने के लिए बहुत ही सरल है। http://redux.js.org/docs/advanced/AsyncActions.html

यह आप कैसे बातचीत इस तरह की संभाल करने की एक बेहतर समझ दे देंगे और आप यह जानेंगे कि कुछ (की तुलना में बेहतर) लिखने के लिए अपने आप को redux-वादा:

इसके बजाय redux डॉक्स पढ़ें।

Answer 3

यह शायद सबसे अच्छा तरीका नहीं है लेकिन यह मेरे लिए काम करता है। मैं अपने संदर्भ के 'इस' को var संदर्भ के रूप में पास करता हूं। फिर जब मुझे प्रतिक्रिया मिलती है तो मैं अपने घटकों के संदर्भ में परिभाषित विधियों को निष्पादित करता हूं। मेरे घटक में मुझे सफलता है एचडीएल और त्रुटि एचडीएल। वहां से मैं सामान्य रूप से अधिक रेडक्स क्रियाओं को ट्रिगर कर सकता हूं। मैंने पिछले सभी उत्तरों की जांच की और इस तरह के एक छोटे से काम के लिए बहुत मुश्किल लग रहा है।

export function updateJob(payload, context){ 

    const request = axios.put(UPDATE_SOMETHING, payload).then(function (response) { 
     context.successHdl(response); 
    }) 
    .catch(function (error) { 
     context.errorHdl(error); 
    });; 

    return { 
     type: UPDATE_SOMETHING, 
     payload: payload, 
    } 
} 

Answer 4

ऐसा लगता है कि आप त्रुटि को पकड़ सकते हैं जहां आप प्रेषण करते हैं, फिर ऐसा होने पर एक अलग त्रुटि प्रेषण करें। यह एक हैक का थोड़ा सा है लेकिन यह काम करता है।

store.dispatch (function (dispatch) { 
     dispatch ({ 
     type:'FOO', 
     payload:axios.get(url) 
     }) 
     .catch (function(err) { 
     dispatch ({ 
      type:"FOO" + "_REJECTED", 
      payload:err 
     }); 
     }); 
    }); 

और कम करने

const reducer = (state=initialState, action) => { 
    switch (action.type) { 
    case "FOO_PENDING": { 
     return {...state, fetching: true}; 
    } 
    case "FOO_REJECTED": { 
     return {...state, fetching: false, error: action.payload}; 
    } 
    case "FOO_FULFILLED": { 
     return { 
     ...state, 
     fetching: false, 
     fetched: true, 
     data: action.payload, 
     }; 
    } 
    } 
    return state; 
}; 

Answer 5

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

कम करने में आप कार्रवाई वस्तु पर त्रुटि विशेषता के अस्तित्व का निरीक्षण करना चाहिए:

// This is the reducer 
export default function(previousState = null, action) { 
    if (action.error) { 
    action.type = 'HANDLE_XHR_ERROR'; // change the type 
    } 
    switch(action.type) { 
    ... 

और कार्रवाई के प्रकार बदलने के लिए, कि आप की स्थापना की है घटक प्रबंधन में एक त्रुटि के लिए एक राज्य परिवर्तन ट्रिगर इसके लिए।

आप गीथब पर here के बारे में कुछ और पढ़ सकते हैं।

Answer 6

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

सबसे पहले, रेडक्स स्थिति में एक संपत्ति सेट करें जो कि किसी भी AJAX त्रुटियों को हो सकता है।

ajaxError: {}, 

दूसरा, सेटअप एक कम करने ajax त्रुटियों को संभालने के लिए:

export default function ajaxErrorsReducer(state = initialState.ajaxError, action) { 
    if (action.error) { 
    const { response } = action.payload; 
    return { 
     status: response.status, 
     statusText: response.statusText, 
     message: response.data.message, 
     stack: response.data.stack, 
    }; 
    } 
    return state; 
} 

अंत में, एक बहुत ही सरल घटक है कि त्रुटियों प्रस्तुत करना होगा किसी भी (मैं प्रतिक्रिया-एस चेतावनी उपयोग कर रहा हूँ अगर वहाँ रहे हैं प्रतिक्रिया बनाने लाइब्रेरी अच्छा अलर्ट दिखाने के लिए):

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import PropTypes from 'prop-types'; 
import Alert from 'react-s-alert'; 

class AjaxErrorsHandler extends Component { 

    constructor(props, context) { 
    super(props, context); 
    this.STATUS_GATE_WAY_TIMEOUT = 504; 
    this.STATUS_SERVICE_UNAVAILABLE = 503; 
    } 

    componentWillReceiveProps(nextProps) { 
    if (this.props.ajaxError !== nextProps.ajaxError) { 
     this.showErrors(nextProps.ajaxError); 
    } 
    } 

    showErrors(ajaxError) { 
    if (!ajaxError.status) { 
     return; 
    } 
    Alert.error(this.getErrorComponent(ajaxError), { 
     position: 'top-right', 
     effect: 'jelly', 
     timeout: 'none', 
    }); 
    } 

    getErrorComponent(ajaxError) { 
    let customMessage; 
    if (
     ajaxError.status === this.STATUS_GATE_WAY_TIMEOUT || 
     ajaxError.status === this.STATUS_SERVICE_UNAVAILABLE 
    ) { 
     customMessage = 'The server is unavailable. It will be restored very shortly'; 
    } 
    return (
     <div> 
     <h3>{ajaxError.statusText}</h3> 
     <h5>{customMessage ? customMessage : ajaxError.message}</h5> 
     </div> 
    ); 
    } 

    render() { 
    return (
     <div /> 
    ); 
    } 

} 

AjaxErrorsHandler.defaultProps = { 
    ajaxError: {}, 
}; 

AjaxErrorsHandler.propTypes = { 
    ajaxError: PropTypes.object.isRequired, 
}; 

function mapStateToProps(reduxState) { 
    return { 
    ajaxError: reduxState.ajaxError, 
    }; 
} 

export default connect(mapStateToProps, null)(AjaxErrorsHandler); 

आप इस घटक को अपने ऐप घटक में शामिल कर सकते हैं।