簡體   English   中英

使用React Router在Redux React應用程序中傳遞道具

[英]Pass props down in Redux React app with React Router

這是我的入口點文件:

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工作原理有點困惑redux-simple-router libs ...

編輯:

我更改了Dashboard組件以將其包含在底部:

Dashboard.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)(Dashboard)

我現在可以訪問Redux狀態和操作。 我不確定這是不是正確的方法,但它現在有用......

使用react-router v1 +,您可以使用以下命令訪問最深的當前路由上的props: this.props.route

<Route path='/' component={App}>
        <IndexRoute component={Home} />
        <Route path='about' component={About} />
        <Route path='dashboard' component={Dashboard} customprop="Hello, it's me" />
        <Route path="*" component={NoMatch} />
</Route>

在儀表板組件中:

this.props.route.customprop => "Hello, it's me"

要訪問當前路徑樹中的所有路徑,可以遍歷this.props.routes (最深路徑是最后一個)。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM