从 redux-simple-router children 访问 redux store

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

我能够使用 "Monkeypatch" 中间件实现此功能，但必须有更好的方法。

首先，我创建了一个函数来对 children 变量进行 monkeypatch。此函数将子项、调度和存储作为参数，returns 一个更新的子变量，其中包含存储和调度的键：

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

然后我简单地更新了已经可以访问 dispatch 和 store 的组件来使用中间件功能：

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

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

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

从 'react' 导入 React，{ 组件}；从'../actions.js'

导入{myAwesomeActionCreator}

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

耶！

请注意： 我已经 reading a lot here 了解如何在 redux 中正确制作中间件，但我还没有时间完全理解它。有比我在这里做的更好的方法。

Answer 2

您应该使用 react-redux 中的 connect 从商店中获取 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

从 redux-simple-router children 访问 redux store

Access redux store from redux-simple-router children

javascript

node.js

reactjs

redux

react-router-redux