यदि आप "वैश्विक त्रुटियों" की अवधारणा चाहते हैं, तो आप एक errorsreducer बना सकते हैं , जो addError, removeError, आदि ... कार्यों के लिए सुन सकता है। फिर, आप अपने Redux राज्य के पेड़ पर हुक कर सकते हैं state.errorsऔर जहाँ भी उपयुक्त हो उन्हें प्रदर्शित कर सकते हैं।
ऐसे कई तरीके हैं जिनसे आप इसे प्राप्त कर सकते हैं, लेकिन सामान्य विचार यह है कि वैश्विक त्रुटियां / संदेश अपने स्वयं के reducer को <Clients />/ से पूरी तरह से अलग रहने के लिए योग्यता प्रदान करेंगे <AppToolbar />। बेशक, अगर इन घटकों में से किसी को भी आपकी आवश्यकता है, errorsतो आप errorsजहां भी जरूरत हो, उन्हें एक प्रस्ताव के रूप में पास कर सकते हैं ।
अद्यतन: कोड उदाहरण
यदि आप "वैश्विक त्रुटियों" errorsको अपने शीर्ष स्तर पर पारित करना चाहते हैं <App />और सशर्त रूप से इसे प्रस्तुत करते हैं (यदि कोई त्रुटियां मौजूद हैं) तो यह एक उदाहरण है । प्रतिक्रिया-रिड्यूक्स काconnect उपयोग <App />कुछ डेटा के लिए अपने घटक को हुक करने के लिए ।
// App.js
// Display "global errors" when they are present
function App({errors}) {
return (
<div>
{errors &&
<UserErrors errors={errors} />
}
<AppToolbar />
<Clients />
</div>
)
}
// Hook up App to be a container (react-redux)
export default connect(
state => ({
errors: state.errors,
})
)(App);
और जहां तक एक्शन क्रिएटर की बात है, तो यह प्रतिक्रिया के अनुसार ( रिडक्स-थंक ) सफलता की विफलता होगी
export function fetchSomeResources() {
return dispatch => {
// Async action is starting...
dispatch({type: FETCH_RESOURCES});
someHttpClient.get('/resources')
// Async action succeeded...
.then(res => {
dispatch({type: FETCH_RESOURCES_SUCCESS, data: res.body});
})
// Async action failed...
.catch(err => {
// Dispatch specific "some resources failed" if needed...
dispatch({type: FETCH_RESOURCES_FAIL});
// Dispatch the generic "global errors" action
// This is what makes its way into state.errors
dispatch({type: ADD_ERROR, error: err});
});
};
}
जबकि आपका reducer केवल त्रुटियों की एक सरणी का प्रबंधन कर सकता है, प्रविष्टियों को उचित रूप से जोड़ना / निकालना।
function errors(state = [], action) {
switch (action.type) {
case ADD_ERROR:
return state.concat([action.error]);
case REMOVE_ERROR:
return state.filter((error, i) => i !== action.index);
default:
return state;
}
}