从通过 React Router 设置的路由访问 Redux Store [英] Accessing Redux Store from routes set up via React Router

问题描述

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

I would like to make use of react-router's onEnter handler in order to prompt users to authenticate when entering a restricted route.

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

So far my routes.js file looks something like this:

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

Ideally, I'd like my requireAuth function to be a redux action that has access to the store and current state, that works like this: store.dispatch(requireAuth()).

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

Unfortunately I don't have access to the store in this file. I don't think I can use really use connect in this case to access the relevant actions that I want. I also can't just import store from the file where the store is created, as this is undefined when the app first loads.

推荐答案

完成此任务的最简单方法是将您的商店传递给返回您的路线的函数(而不是直接返回您的路线).这样你就可以在 onEnter 和其他 react 路由方法中访问 store.

The easiest way to accomplish this is to pass your store to a function that returns your routes (rather than return your routes directly). This way you can access the store in onEnter and other react router methods.

所以对于您的路线:

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函数，传入store:

Then update your main component to call the getRoutes function, passing in the store:

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

至于从 requireAuth 分派一个动作，你可以这样写你的函数:

As for dispatching an action from requireAuth, you could write your function like this:

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

希望这会有所帮助.

这篇关于从通过 React Router 设置的路由访问 Redux Store的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！