আপনি যদি "গ্লোবাল ত্রুটি" ধারণাটি পেতে চান তবে আপনি একটি errorsহ্রাসকারী তৈরি করতে পারেন , যা অ্যাডেরর, রিমুভাল এয়ার, ইত্যাদি ... ক্রিয়া শুনতে পাবে listen তারপরে, আপনি এখানে আপনার রেডাক্স রাষ্ট্রের গাছটিতে প্রবেশ করতে পারেনstate.errors এবং উপযুক্ত যেখানে এগুলি প্রদর্শন করতে পারেন।
আপনি এখানে আসতে পারেন এমন অনেকগুলি উপায় রয়েছে তবে সাধারণ ধারণাটি হ'ল বৈশ্বিক ত্রুটি / বার্তাগুলি তাদের নিজস্ব রিডুসারকে <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});
});
};
}
আপনার রিডুসারটি কেবল ত্রুটিগুলির একটি অ্যারে পরিচালনা করতে পারে, এন্ট্রিগুলিকে যথাযথভাবে যোগ / সরিয়ে দেয়।
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;
}
}