1

我试图弄清楚如何从路由内访问 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 组件中转储道具，我将无权访问商店。任何帮助表示赞赏！

4

2 回答 2

2

您应该使用connectfrom从商店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中可以找到一些很好的使用示例： https ://github.com/rackt/react-redux/blob/master/docs/api.md#examplesreact-redux

于 2016-01-20T21:04:05.410 回答
0

我能够使用“Monkeypatch”中间件来完成这项工作，但必须有更好的方法。

首先，我创建了一个函数来猴子补丁子变量。这个函数将 child、dispatch 和 store 作为参数，并返回一个更新的 children 变量，其中包含 store 和 dispatch 的键：

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 函数仅返回更新的子对象，因此它仍然有效。

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

从'react'导入反应，{组件}；从 '../actions.js' 导入 { myAwesomeActionCreator }

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

耶！

请注意： 我在这里阅读了很多关于如何在 redux 中正确制作中间件的文章，但我还没有时间完全理解它。有比我在这里做的更好的方法。

于 2016-01-20T18:21:26.230 回答