reactjs – 使用React Router在Redux React应用程序中传递道具

import React,{ PropTypes } from 'react'
import ReactDOM from 'react-dom'
import { createStore,combineReducers } from 'redux'
import { Provider } from 'react-redux'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import { Router,Route } from 'react-router'
import { syncReduxAndRouter,routeReducer } from 'redux-simple-router'
import reducers from './reducers'

import App from './containers/app.jsx'
import About from './about.jsx'
import Dashboard from './dashboard/index.jsx'

const reducer = combineReducers(Object.assign({},reducers,{
    routing: routeReducer
}))
const store = createStore(reducer)
const history = createBrowserHistory()

syncReduxAndRouter(history,store)

const routes = {
  path: '/',component: App,childRoutes: [
    { path: 'about',component: About },{ path: 'dashboard',component: Dashboard }
  ]
}

ReactDOM.render(
    <Provider store={store}>
        <Router routes={routes} history={history} />
    </Provider>,document.getElementById('app')
)

这似乎是我可以收集的相当标准.但是,我对如何从App下载道具,例如Dashboard组件感到有点困惑.这是App组件：

import React,{PropTypes} from 'react'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import {Link} from 'react-router'

import * as authActions from './../actions/auth'

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>App</h1>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/dashboard">Dashboard</Link>
                    </li>
                </ul>
                {this.props.children}
            </div>
        )
    }
}

App.propTypes = {
    authActions: PropTypes.object.isRequired,authState: PropTypes.object.isRequired
}

function mapStateToProps(state) {
    return {authState: state.authState}
}

function mapDispatchToProps(dispatch) {
    return {
        authActions: bindActionCreators(authActions,dispatch)
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(App)

对不起,代码不是更简洁,但我特别试图将authState(从我的Reducer)传递到Dashboard组件,我对React Router和redux-simple的工作原理有点困惑-router libs …

编辑：

我更改了仪表板组件以将其包含在底部：

Dashboard.propTypes = {
    authActions: PropTypes.object.isRequired,mapDispatchToProps)(Dashboard)

我现在可以访问Redux状态和操作.我不确定这是不是正确的方法,但它现在有用……