Dove impostare i cookie nell'applicazione Isomorphic Redux?

Question

Ho 3 domande generali su redux e l'applicazione isomorfo:

• Qual è il modo migliore per condividere i dati di runtime '' tra client e server? Ad esempio, quando l'utente ha effettuato il login a un'API remota, memorizzo l'oggetto della sessione nei cookie. In questo modo, la volta successiva il il client richiede il mio front-end, il server front-end può leggere i cookie e inizializzare il negozio di redux con la sua sessione precedente. Lo svantaggio di questo è che il client deve convalidare/invalidare la sessione all'avvio (ad esempio in componentDidMount del componente root). Devo richiedere il lato server di sessione piuttosto che leggerlo dai cookie?
• Dove devo eseguire l'operazione di memorizzazione dei cookie, nei creatori di azioni o nei riduttori? Devo memorizzare il cookie nel mio riduttore che gestisce la sessione utente?
• Dove devo eseguire l'operazione di reindirizzamento dell'utente (tramite react-router)? Voglio dire quando il mio utente è connesso con successo in, da dove devo inviare l'azione di reindirizzamento (dal loginActionCreator una volta la promessa di login viene risolto ?, da qualche altra parte?)

Grazie in anticipo.

Answer 1

Domanda 2: è necessario eseguire la memorizzazione dei cookie nel proprio creatore di azioni. I riduttori devono rimanere funzioni pure.

Sono davvero dispiaciuto di non conoscere le risposte a 1 & 3, ma spero che questo aiuti!

Answer 2

Probabilmente dovresti suddividere le tue domande in tre diverse domande di overflow dello stack poiché sono tutte leggermente diverse.

Sono d'accordo con Ethan, i vostri riduttori dovrebbero essere puri senza effetti collaterali. Questo è l'obiettivo (meglio noto come best practice) comunque. Tuttavia, Ben Nadel ha esplorato le domande in questo senso e suggerisce di creare un livello di flusso di lavoro per gestire la logica di business piuttosto che porre tale onere sul punto vendita. Dovresti dare un'occhiata al suo articolo Managing Locally Cached Data with Redux in AngularJS per maggiori informazioni al riguardo.

Answer 3

Sono riuscito a ottenere una struttura di app davvero pulita. Ecco cosa ho trovato per ogni domanda:

• Ho solo la quota tra il mio client e il server front-end il token del server API tramite i cookie. Ogni volta che il cliente richiede il sito. Il server front-end chiama il server API per convalidare la sessione. Se questi server si trovano sulla stessa rete, sono molto veloci (< 5 ms). Preleggio anche alcuni dati utili per il client sul server prima del rendering iniziale. Riesco a ottenere la mia applicazione caricata e pronta (javascript caricato) nel client in 600ms. È abbastanza decente.

• L'azione di memorizzazione del cookie è nelle mie azioni creatori. Come diceva Ethan Clark, dobbiamo mantenere i riduttori puri. È molto più facile da testare.

• Invio ancora il reindirizzamento nel mio firmatario dopo che l'utente è stato autenticato. Immagino sia più facile provare che inviare l'azione dopo la risoluzione di promessa nel componente o altrove.

In realtà, tenendo questo in mente ci permette di avere un app davvero facile da testare (si aspettano per il creatore azioni in cui è necessario disporre di tonnellata di spie).

Spero che possa aiutare qualcuno.

Grazie per aver partecipato.

Answer 4

I cookie sono sincroni: è possibile idratare e sottoscrivere il proprio negozio o realizzare un meta-riduttore che avvolge il riduttore prima di essere aggiunto a createStore. Ecco un rapido esempio di entrambi i seguenti:

//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 })