Wo kann Cookie in isomorpher Redux-Anwendung gesetzt werden?

Question

Ich habe 3 allgemeine Fragen zu redux und isomorph Anwendung:

• Was ist der beste Weg ‚Laufzeit‘ Daten zwischen Client und Server zu teilen? Wenn der Benutzer beispielsweise eine entfernte API anmeldet, speichere ich das Sitzungsobjekt in Cookies. Auf diese Weise nächste Mal der Client mein Front-End anfordert, kann der Front-End-Server die Cookies lesen und den Redux-Speicher mit seiner vorherigen Sitzung initialisieren. Der Nachteil davon ist, dass der Client die Sitzung beim Booten validieren/ungültig machen muss (zB in componentDidMount der Root-Komponente). Sollte ich die Session-Server-Seite anfordern, anstatt sie von Cookies zu lesen?
• Wo soll ich den Vorgang des Speicherns von Cookies ausführen, in Aktionserstellern oder in Reduzierern? Sollte ich den Cookie in meinem Reducer speichern, der die Benutzersitzung behandelt?
• Wo soll ich den Betrieb der Umleitung des Benutzers ausführen (über React-Router)? ich meine, wenn mein Benutzer erfolgreich angemeldet, von wo soll ich die Umleitung Aktion Versand (ab loginActionCreator einmal die Login-Versprechen gelöst ist ?, woanders?)

Vielen Dank im Voraus.

Answer 1

Frage 2: Sie sollten das Speichern von Cookies in Ihrem Aktionsersteller ausführen. Reduzierstücke müssen reine Funktionen bleiben.

Es tut mir wirklich leid, dass ich die Antworten auf 1 & 3 nicht kenne, aber ich hoffe, dass dies hilft!

Answer 2

Sie sollten Ihre Fragen wahrscheinlich in drei verschiedene Stapelüberlauffragen aufteilen, da sie alle ein wenig anders sind.

Ich stimme mit Ethan, Ihre Reduzierungen sollten rein sein, ohne Nebenwirkungen. Das ist das Ziel (auch bekannt als Best Practice). Ben Nadel hat jedoch Fragen in dieser Richtung untersucht und schlägt vor, eine Workflow-Schicht zu erstellen, um die Geschäftslogik zu verwalten, anstatt diese Belastung für den Laden zu übernehmen. Sie sollten seinen Managing Locally Cached Data with Redux in AngularJS Artikel für mehr Information darüber überprüfen.

Answer 3

Ich habe es geschafft, eine wirklich gepflegte App-Struktur zu bekommen. Hier ist, was ich für die einzelnen Fragen gefunden:

• ich nur Anteil zwischen meinem Client und Front-End-Server der API-Server-Token über Cookies. Jedes Mal, wenn der Client die Site anfordert. Der Front-End-Server ruft den API-Server auf, um die Sitzung zu validieren. Wenn diese Server im selben Netzwerk sind, ist es sehr schnell (< 5ms). Ich lade auch einige nützliche Daten für den Client auf dem Server vor dem anfänglichen Rendern ein. Ich bekomme meine Anwendung geladen und bereit (Javascript geladen) in dem Client in 600ms. Es ist ziemlich anständig.

• Die Aktion des Speicherns des Cookies ist in meinen Aktionen Creators. Wie Ethan Clark sagte, müssen wir Reducer rein halten. Es ist viel einfacher zu testen.

• Ich verschicke immer noch die Umleitung in meinem Signin Creator, sobald der Benutzer authentifiziert ist. Ich denke, es ist einfacher zu testen, als die Aktion nach der Auflösung des Versprechens in der Komponente oder anderswo zu versenden.

In der Tat, dies unter Berücksichtigung der Tatsache ermöglicht es uns, eine App einfach zu testen, haben (erwarten für die Aktionen Schöpfer, wo man Tonne Spione haben muss).

Ich hoffe, es wird jemandem helfen.

Vielen Dank für die Teilnahme.

Answer 4

Cookies sind synchron - Sie können Ihr Geschäft entweder hydratisieren und abonnieren oder einen Meta Reducer erstellen, der den Reducer umgibt, bevor er zu createStore hinzugefügt wird. Hier ist ein schnelles Beispiel für beide unten:

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