在带有SSR的react-redux体系结构中使用history.js存储browserHistory

如何保存访问SSR react redux应用程序的用户的完整路由器历史记录？我尝试过修改react-redux路由器包的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
}

参考：

然而，我认为这应该在中间件中实现

毫无疑问，这（存储整个上一个会话历史）似乎是一个足够常见的用例，也许有人已经制定了一个最佳实践

也许甚至可以通过react router中的historyjs对象（不带react router redux）访问完整的历史记录

---

我正在寻找如何在redux状态下存储用户会话的完整历史记录，并在用户关闭浏览器或离开站点时将其发布到api服务器的答案。（如果这不可能，我可以在每次导航时发布。）然后我想在用户主页上的“最近查看”页面列表中显示此历史记录。

首先，您不必干预

react redux router

的内部结构

正如您在介绍的代码中所看到的，

react redux router

导出一个

LOCATION\u 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;
}

然而，这可能是不必要的。你的假设是正确的，即这可以通过以下方式实现。下面是中间件层的一个示例：

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

现在，如何保存和加载数据完全取决于您（与react路由器和浏览器历史无关）

---

在官方文档中，他们建议使用

窗口。预加载的状态变量。
首先，您不必干预
react redux路由器的内部

正如您在介绍的代码中所看到的，
react redux router
导出一个
LOCATION\u 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;
}

然而，这可能是不必要的。你的假设是正确的，即这可以通过以下方式实现。下面是中间件层的一个示例：

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

现在，如何保存和加载数据完全取决于您（与react路由器和浏览器历史无关）

在官方文档中，他们建议使用
窗口。\uu预加载\u状态\uu
变量