Isomorphic Redux अनुप्रयोग में कुकी सेट करने के लिए कहां?

Question

मैं redux और isomorphic आवेदन के बारे में 3 सामान्य प्रश्न हैं:

• क्लाइंट और सर्वर के बीच 'क्रम' डाटा साझा करने के लिए सबसे अच्छा तरीका क्या है? उदाहरण के लिए, जब उपयोगकर्ता एक दूरस्थ एपीआई में लॉग इन होता है, तो मैं सत्र ऑब्जेक्ट को कुकीज़ में संग्रहीत करता हूं। इस तरह, अगली बार क्लाइंट मेरे फ्रंट-एंड का अनुरोध करता है, फ्रंट-एंड सर्वर कुकीज पढ़ सकता है और इसके पिछले सत्र के साथ रेडक्स स्टोर को प्रारंभ कर सकता है। इसका नकारात्मक पक्ष यह है कि क्लाइंट बूट पर सत्र को मान्य/अमान्य करने के लिए है (उदाहरण के लिए रूट घटक के घटकडिडमाउंट में)। क्या मुझे कुकीज़ से इसे पढ़ने के बजाय सत्र सर्वर पक्ष का अनुरोध करना चाहिए?
• क्रिया रचनाकारों या reducers में, कुकी भंडारण के संचालन को मैं निष्पादित करना चाहिए? क्या मुझे कुकी को मेरे रेड्यूसर में स्टोर करना चाहिए जो उपयोगकर्ता सत्र को संभालता है?
• मुझे उपयोगकर्ता को रीडायरेक्ट करने के संचालन को निष्पादित करना चाहिए (प्रतिक्रिया-राउटर के माध्यम से)? मेरा मतलब है मेरे उपयोगकर्ता सफलतापूर्वक में लॉग ऑन है जब मैं कहाँ रीडायरेक्ट कार्रवाई प्रेषण चाहिए (loginActionCreator से एक बार लॉगिन वादा ?, कहीं और? हल हो गई है)

अग्रिम धन्यवाद से।

Answer 1

प्रश्न 2: आपको अपने एक्शन निर्माता में कुकी स्टोरिंग निष्पादित करनी चाहिए। Reducers शुद्ध कार्यों रहना चाहिए।

मुझे वास्तव में खेद है कि मुझे 1 & 3 के उत्तर नहीं पता, लेकिन मुझे उम्मीद है कि इससे मदद मिलती है!

Answer 2

आपको अपने प्रश्नों को तीन अलग-अलग स्टैक ओवरफ़्लो प्रश्नों में तोड़ना चाहिए क्योंकि वे सब कुछ अलग हैं।

मैं एथन से सहमत हूं, आपके reducers कोई साइड इफेक्ट्स के साथ शुद्ध होना चाहिए। वैसे भी यह लक्ष्य (उर्फ सर्वश्रेष्ठ अभ्यास) है। हालांकि, बेन नेडल इन पंक्तियों के साथ प्रश्नों की खोज कर रहे हैं और दुकान पर उस बोझ को रखने के बजाय व्यावसायिक तर्क प्रबंधन के लिए वर्कफ़्लो परत बनाने का सुझाव देते हैं। इसके बारे में अधिक जानकारी के लिए आपको अपने Managing Locally Cached Data with Redux in AngularJS आलेख को देखना चाहिए।

Answer 3

मैं वास्तव में एक साफ ऐप संरचना प्राप्त करने में कामयाब रहा। यहाँ मैं प्रत्येक प्रश्न के लिए क्या मिला है:

• मैं सिर्फ अपने ग्राहक और सामने के अंत सर्वर कुकीज़ के माध्यम से API सर्वर टोकन के बीच साझा करें। प्रत्येक बार ग्राहक साइट का अनुरोध करता है। फ्रंट-एंड सर्वर एपीआई सर्वर को सत्र को सत्यापित करने के लिए कॉल करता है। यदि ये सर्वर एक ही नेटवर्क पर हैं तो यह वास्तव में तेज़ है (< 5ms)। मैं प्रारंभिक प्रस्तुत करने से पहले सर्वर पर क्लाइंट के लिए कुछ उपयोगी डेटा भी प्रीफ़ेच करता हूं। मैं 600 एमएमएस में क्लाइंट में अपना एप्लिकेशन लोड और तैयार (जावास्क्रिप्ट लोड) प्राप्त करने का प्रबंधन करता हूं। यह बहुत सभ्य है।

• कुकी को संग्रहीत करने की क्रिया मेरे कार्यों के निर्माता में है। जैसा कि एथन क्लार्क ने कहा, हमें reducers शुद्ध रखना चाहिए। परीक्षण करने के लिए यह और अधिक आसान है।

• उपयोगकर्ता अभी भी प्रमाणीकृत होने के बाद भी मैं अपने साइनइन निर्माता में रीडायरेक्ट भेजता हूं। मुझे लगता है कि घटक या अन्य जगहों में वादे संकल्प के बाद कार्रवाई को प्रेषित करने से परीक्षण करना आसान है।

वास्तव में, इसे ध्यान में रखते हुए हमें एक एप्लिकेशन वास्तव में परीक्षण करने के लिए आसान (कार्यों निर्माता जहां जासूसों की टन होना आवश्यक है के लिए उम्मीद) की अनुमति देता है।

उम्मीद है कि यह किसी की मदद करेगा।

भाग लेने के लिए धन्यवाद।

Answer 4

कुकीज़ तुल्यकालिक कर रहे हैं - या तो आप हाइड्रेट कर सकते हैं और अपनी दुकान की सदस्यता या एक मेटा कम करने जो कम करने इर्द-गिर्द घूमती पहले यह CreateStore से जोड़ा गया है। यहां नीचे दोनों का त्वरित उदाहरण दिया गया है:

//first option 
const Cookie = require('js-cookie'); 
const loadState = (key) => Cookie.getJSON(key); 
const saveState = (nextState, key) => Cookie.set(key, nextState); 
const persistedState = loadState('todos'); 
const store = createStore(
    todoApp, 
    persistedState 
); 

store.subscribe(throttle(() => { 
    saveState({ 
    todos: store.getState().todos, 
    }, 'todos'); 
}, 1000)); 

//second option - meta reducer 
// usage 
    const Cookie = require('js-cookie'); 

    export function cookieMeta (
     key: string, 
     reducer: any, 
     expiry: Date | number = 365, 
     path: string = '/', 
     domain: string = window.location.hostname): Function { 
     return function(state: any, action: any): any { 
     let nextState = reducer(state, action); 
     let cookieState = Cookie.getJSON(key); 

     if (action.type.includes('DELETE')) { 
      Cookie.remove(key); 
     } else if (!nextState && cookieState || action.type === '@@redux/INIT') { 
      nextState = cookieState; 
     } else if (nextState && nextState !== cookieState) { 
      Cookie.set(key, nextState, { expires: expiry, path: path, domain: domain, secure: process.env.local }); 
     } 
     return nextState; 
     }; 
    }; 
// how to implement the meta reducer 
import { todos } from './todos'; 
import { cookieMeta } from './middleware/cookieMeta'; 
export function TODOS_REDUCER (state: any, action: any) { 
    return cookieMeta('todos', todos)(state, action); 
} 
export const todoApp = combineReducers({ todos: TODOS_REDUCER })