reactjs - 有没有办法从史诗中访问路由器历史记录？

Question

我正在使用 react-router-4 并且此版本的相应 react-router-redux 还不稳定。我很好奇是否有办法history从redux-observable史诗中访问。例子：

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

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

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

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

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

  return action.pipe(...)
}

combineEpics(myEpic);

Answer 2

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

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