Question

我正在试图弄清楚如何从路线中访问redux商店，这样我就可以从路线中派遣行动。

这是我的顶级组件的样子：

class App extends Component {
  render() {
    return (
      <div>
         { children }
      </div>
    );
  }
}

我的redux-simple-router代码如下：

render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={ Home } />
        <Route path="/example" component={ ExampleRoute } />
      </Route>
    </Router>
  </Provider>,
  rootElement
)

如果我从ExampleRoute组件中转储道具，我无法访问商店。任何帮助表示赞赏！

Answer 1

您应该使用connect中的react-redux从商店获取dispatch和当前状态。这里的redux文档中概述了它：http://rackt.org/redux/docs/basics/UsageWithReact.html

以下是您的Example组件：

//...
import { connect } from 'react-redux'
//...

export class Example extends Component {
    render () {
        const { dispatch, thingName } = this.props
        return (
            <button onClick={ () => {
                dispatch(myAwesomeActionCreator())
            }}>{ thingName }</button>
        );
    }
}

export default connect(state => state)(Example)

connect文档中可以找到一些如何使用react-redux的好例子：https://github.com/rackt/react-redux/blob/master/docs/api.md#examples

Answer 2

我能够使用“Monkeypatch”中间件，但必须有更好的方法。

首先，我创建了一个monkeypatch子变量的函数。此函数将子，调度和存储作为参数，并返回带有存储和调度键的更新子变量：

function routeStoreMiddleware (children, dispatch, store) {
  return {
    ...children,
    props: {
      ...children.props,
      dispatch: dispatch,
      store: store
    }
  }
}

然后我只是更新了已经有权访问调度和存储的组件来使用中间件函数：

class App extends Component {
  render() {
    return (
      <div>
         { routeStoreMiddleware(children, dispatch, store) }
      </div>
    );
  }
}

由于命名不佳的routeStoreMiddleware函数只返回一个更新的子对象，它仍然有效。

现在我可以从ExampleRoute组件中调度事件和显示数据。

从'react'导入React，{Component}; 从'../ actionss.js'

导入{myAwesomeActionCreator}

export class Example extends Component {
  render () {
    const { dispatch, store } = this.props
    return (
      <button onClick={ () => {
        dispatch(myAwesomeActionCreator())
      }}>{ store.thingName }</button>
    );
  }
}

耶！

请注意： 关于如何在redux中正确制作中间件，我一直reading a lot here，但我还没来得及完全理解它。有一种比我在这里做得更好的方式。

从redux-simple-router孩子访问redux商店

2 个答案: