Store browserHistory mit history.js in react redux Architektur mit SSR

Question

Wie kann man den vollständigen Routerverlauf eines Benutzers, der eine SSR react-redux App besucht, beibehalten? Ich habe versucht, die reducer.js-Datei des reactive-redux-router-Pakets als solche zu modifizieren ... aber wenn der Benutzer über SSR lädt, wird das History-Array zurückgesetzt.

/** 
* This action type will be dispatched when your history 
* receives a location change. 
    */ 
export const LOCATION_CHANGE = '@@router/LOCATION_CHANGE' 

const initialState = { 
    locationBeforeTransitions: null, 
    locationHistory: [] 
} 

/** 
* This reducer will update the state with the most recent location history 
* has transitioned to. This may not be in sync with the router,  particularly 
* if you have asynchronously-loaded routes, so reading from and relying on 
* this state is discouraged. 
*/ 
export function routerReducer(state = initialState, { type, payload } = {})   { 
if (type === LOCATION_CHANGE) { 

return { ...state, 
    locationBeforeTransitions: payload, 
    locationHistory: state.locationHistory.concat([payload]) } 
} 

return state 
} 

ref: https://github.com/reactjs/react-router-redux/blob/master/src/reducer.js

Aber ich denke, diese soll in einer Middleware erreicht werden.

Unerwarteterweise scheint das (Speichern der gesamten vorherigen Sitzungshistorie) wie ein gemeinsamer genug Anwendungsfall, dass vielleicht jemand eine Best Practice bereits formuliert hat.

Vielleicht ist sogar diese vollständige Geschichte über das Objekt historyjs in react-router ohne react-router-redux erreichbar.

Ich bin auf der Suche nach Antworten, wie Sie den vollständigen Verlauf der Sitzung eines Benutzers im Redux-Status speichern und auf meinem API-Server veröffentlichen, wenn der Benutzer den Browser schließt oder von der Site weg navigiert. (Wenn das nicht möglich ist, könnte ich es einfach bei jeder Navigation posten.) Dann möchte ich diesen Verlauf in einer "kürzlich angesehenen" Liste von Seiten auf den Homepages der Benutzer zeigen.

Answer 1

Zuallererst müssen Sie sich nicht mit den Interna von react-redux-router einmischen.

Wie Sie im Code sehen können, exportiert react-redux-router eine LOCATION_CHANGE Aktion.

Sie können diese Aktion in einem eigenen Reduzierstück verwenden. Hier ein Beispiel:

// locationHistoryReducer.js 
import { LOCATION_CHANGE } from 'react-router-redux'; 

export default function locationHistory(state = [], action) { 
    if (action.type === LOCATION_CHANGE) { 
    return state.concat([action.payload]); 
    } 
    return state; 
} 

Dies kann jedoch unnötig sein. Ihre Annahme, dass dies mit middleware erreicht werden kann, ist richtig. Hier ist ein Beispiel für eine Middleware-Schicht:

const historySaver = store => next => action => { 
    if (action.type === LOCATION_CHANGE) { 
    // Do whatever you wish with action.payload 
    // Send it an HTTP request to the server, save it in a cookie, localStorage, etc. 
    } 
    return next(action) 
} 

Und hier ist, wie diese Schicht in dem Laden gelten:

let store = createStore(
    combineReducers(reducers), 
    applyMiddleware(
    historySaver 
) 
) 

Nun, wie Sie speichern und Laden von Daten sind völlig bis zu Ihnen (und hat nichts mit react-router und dem Browserverlauf zu tun haben). In den offiziellen Dokumenten empfehlen sie injecting the initial state on the server side mit einer window.__PRELOADED_STATE__ Variable