스토어 browserHistory 사용 history.js 하나는 SSR 반응-REDUX 응용 프로그램을 방문한 사용자의 전체 라우터 기록을 유지할 수 있습니다 방법 SSR

Question

와 REDUX 아키텍처 반응? react-redux-router 패키지의 reducer.js 파일을 수정하려고 시도했지만 사용자가 SSR을 통해로드하면 내역 배열이 재설정됩니다.

/** 
* 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

그러나, 나는이가 미들웨어 달성하도록되어 생각합니다.

어쨌든 (이전 세션 기록 전체를 저장하는)이 공통적 인 사용 사례 인 것 같습니다. 아마도 누군가가 이미 모범 사례를 공식화했습니다.

아마도이 전체 기록은 react-router-redux가없는 react-router의 historyjs 개체를 통해 액세스 할 수 있습니다.

사용자가 브라우저를 닫거나 사이트를 탐색 할 때 redux 상태에서 사용자 세션의 전체 기록을 저장하고이를 내 API 서버에 게시하는 방법에 대한 답변을 찾고 있습니다. (이것이 불가능할 경우 모든 탐색에 게시 할 수 있습니다.) 그런 다음이 기록을 사용자의 홈 페이지에있는 '최근에 본'페이지 목록에 표시하고 싶습니다. 모든

Answer 1

첫째, 당신은 react-redux-router의 내부에 참견 할 필요가 없습니다.

제시된 코드에서 알 수 있듯이 react-redux-router은 LOCATION_CHANGE 액션을 내 보냅니다.

당신은 당신의 자신의 감속기에서이 작업을 할 수 있습니다. 예를 들면 다음과 같습니다.

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

그러나 이것은 필요하지 않을 수 있습니다. middleware으로이 작업을 수행 할 수 있다고 가정하십시오. 다음은 미들웨어 계층의 예 :

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

는 그리고 여기 가게에서 해당 레이어를 적용하는 방법은 다음과 같습니다

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

이제

, 저장하는 방법과 데이터를로드 당신에게 전적으로 (그리고 아무 상관이 없다 반응 라우터와 브라우저의 역사). 공식 문서에서

는, 그들은 window.__PRELOADED_STATE__ 변수를 사용하여 injecting the initial state on the server side하는 것이 좋습니다.