除了epic之外，有没有办法访问路由器历史记录？

Question

我使用的是react-router-4，这个版本对应的react-router-redux还不稳定。我很好奇是否有从redux-observable epic访问history的方法。示例：

export function profileDropdownEpic (action$, { getState, dispatch }{
  return action$.ofType('SET_SELECTED_ITEM')
    .mapTo(() => {
      const selectedItem = getState().listDropdown.get('SelectedItem')
      if (selectedItem === 'logout') {
        history.push('/login')
      }  
      return {}
    })
}

Answer 1

在使用epics时，您希望将History作为EpicMiddleware的依赖项包括在内。依赖项作为第三个参数添加到每个史诗中。

从创建历史开始。

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();

创建依赖项时，将history作为依赖项对象的参数传递：

createEpicMiddleware({
  dependencies: { 
    history: history
  }
})

在创建实际的Epic时，第三个参数包含依赖项，其中一个将是history。

const myEpic = (action, store, dependencies) => {
  // dependency.history.createHref(...)

  return action.pipe(...)
}

combineEpics(myEpic);

Answer 2

创建导出createHistory()的history.js文件

// history.js
import createHistory from 'history/createBrowserHistory'
export default createHistory()

然后把它导入你的史诗中：

// epics.js
import history from './history'     

export function profileDropdownEpic (action$, { getState, dispatch }){
  return action$.ofType('SET_SELECTED_ITEM')
    .mapTo(() => {
      const selectedItem = getState().listDropdown.get('SelectedItem')
      if (selectedItem === 'logout') {
        history.push('/login')
      }  
      return {}
  })
}

别忘了在你的<Router />中设置历史道具

import history from './history'

<Router history={history}>...</Router>