如何从 react-router onEnter 挂钩连接到 redux store？

Question

我想在路由加载时使用 react-router 的 onEnter 钩子来检查我的 redux 存储中的变量。

根据文档，onEnter:

...receives the next router state as its first argument. The replaceState function may be used to trigger a transition to a different URL.

没有通过商店。是否可以从此挂钩中连接到 redux 存储？我尝试了各种方法，但找不到实现此目标的方法。

我使用的版本：

"react-redux": "^4.0.0",
"react-router": "1.0.0-rc1",
"redux": "^3.0.0",

Answer 1

您可以创建文件 store.js 并导出最终存储（与传递给 redux 的相同）

例如

import configureStore from 'utils/configure-store.js';

const store = configureStore();
export default store;

然后导入到您的路由器文件并通过 store.getState()

读取状态

Answer 2

让你路由一个在参数中获取存储的函数

export default (store) => {
 return (
  <Route handler={App} path="/">
    <Route path="mypath" component={handler} onEnter={myHook(store)}>
  <Route>
 )
};

在你的转换挂钩中做同样的事情

export const myHook = (store) => {
  return (location, replaceWith) => {
    // Do something with your store
  }
};

然后假设您在同一个文件中创建商店和路由器

const router = (
            <Provider store={store}>
                <Router history={history}>
                    {routes(store)}
                </Router>
            </Provider>
        );

Answer 3

React Router 版本 4 migration documentation 建议使用组件生命周期方法来处理更改。

例如使用 componentWillMount 而不是 onEnter 或通过 componentWillReceiveProps 响应状态变化。

因此在您的组件中：

import { browserHistory } from 'react-router';

...

componentWillMount() {
  if (someConditionIsTrue) {
    browserHistory.push('/your/new/path');
  }
}

为了奖励积分，您可以将其写成 Higher Order Component，它只是包装您的原始组件。让需要相同行为的任何其他组件更容易共享此逻辑。

如何从 react-router onEnter 挂钩连接到 redux store？

How to connect to redux store from react-router onEnter hook?

reactjs

react-router

redux