无法读取未定义的属性“类型”（react-router-redux）

Question

我试图在退出后重定向到该页面。但是，每次我退出时，它都会成功引导页面。但是，我仍然收到错误

无法读取未定义的属性“类型”

“暂停捕获异常”的进一步研究，它与react-router-redux 相关。

所以store.dispatch(push('/signin'))下面代码中的行导致了这个问题。如果我改为.map(() => ({ type: 'NOT_EXIST' }));，就不会有问题。

什么可能导致这种情况？谢谢

动作/auth.action.js

export const signOutSucceedEpic = (action$, store) =>
  action$
    .ofType(SIGN_OUT_SUCCEED)
    .map(() => store.dispatch(push('/signin')));  // <- this line causes the issue

动作/ index.js

import { combineEpics } from 'redux-observable';

export default combineEpics(
  // ...
  signOutSucceedEpic
);

索引.js

import { Provider } from 'react-redux';
import { Route } from 'react-router-dom';
import { ConnectedRouter, routerMiddleware, push } from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';
import rootEpic from './actions/index';

const history = createHistory();
const routeMiddleware = routerMiddleware(history);
const epicMiddleware = createEpicMiddleware(rootEpic);

export const store = createStore(
  rootReducer,
  persistedState,
  composeWithDevTools(
    applyMiddleware(
      epicMiddleware,
      routeMiddleware
    )
  )
);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <Route path="/signin" component={SignIn} />
        <Route exact path="/" component={Home} />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

Answer 1

问题是您在运算符store.dispatch内部调用map，映射到该运算符的返回值store.dispatch()，但它不返回任何内容，因此该值undefined由您的史诗发出，然后由 redux-observable 代表您分派。然后，react-router-redux 接收该undefined值，但它假设只会调度具有属性的操作type，因此它会导致相关错误。

我建议重新检查 redux-observable 文档，因为store.dispatch直接在史诗中调用是一种反模式，而且没有必要。您的史诗应该发出一系列操作，这些操作将由 redux-observable 为您分派，因此在这种情况下，您可以删除store.dispatch并映射到操作的结果push()：

export const signOutSucceedEpic = (action$, store) =>
  action$
    .ofType(SIGN_OUT_SUCCEED)
    .map(() => push('/signin'));