javascript - 从通过 React Router 设置的路由访问 Redux Store

Question

我想利用 react-router 的 onEnter 处理程序来提示用户在进入受限路由时进行身份验证。

到目前为止，我的 routes.js 文件看起来像这样:

import React from 'react';
import { Route, IndexRoute } from 'react-router';

export default (
    <Route   path="/"         component={App}>
      <IndexRoute             component={Landing} />
      <Route path="learn"     component={Learn} />
      <Route path="about"     component={About} />
      <Route path="downloads" component={Downloads} onEnter={requireAuth} />
    </Route>
)

理想情况下，我希望我的 requireAuth 函数是一个可以访问商店和当前状态的 redux 操作，其工作方式如下:store.dispatch(requireAuth()) 。

很遗憾，我无权访问此文件中的商店。我认为我不能真正使用 connect在这种情况下访问我想要的相关操作。我也不能只从创建商店的文件中 import store，因为当应用首次加载时这是未定义的。

Answer 1

完成此操作的最简单方法是将您的商店传递给返回您的路线的函数(而不是直接返回您的路线)。这样您就可以在 onEnter 和其他 React 路由器方法中访问商店。

所以对于你的路线:

import React from 'react';
import { Route, IndexRoute } from 'react-router';

export const getRoutes = (store) => (
  const authRequired = (nextState, replaceState) => {
    // Now you can access the store object here.
    const state = store.getState();

    if (!state.user.isAuthenticated) {
      // Not authenticated, redirect to login.
      replaceState({ nextPathname: nextState.location.pathname }, '/login');
    }
  };

  return (
    <Route   path="/"         component={App}>
      <IndexRoute             component={Landing} />
      <Route path="learn"     component={Learn} />
      <Route path="about"     component={About} />
      <Route path="downloads" component={Downloads} onEnter={authRequired} />
    </Route>
  );
)

然后更新您的主要组件以调用 getRoutes 函数，传入商店:

<Provider store={ store }>
  <Router history={ history }>
    { getRoutes(store) }
  </Router>
</Provider>

至于从 requireAuth 发送一个 Action ，你可以这样写你的函数:

const authRequired = (nextState, replaceState, callback) => {
  store.dispatch(requireAuth())  // Assume this action returns a promise
    .then(() => {
      const state = store.getState();

      if (!state.user.isAuthenticated) {
        // Not authenticated, redirect to login.
        replaceState({ nextPathname: nextState.location.pathname }, '/login');
      }

      // All ok
      callback();
    });
};

希望这对您有所帮助。