使用 react-router-dom 和 redux 时从组件访问 props

Question

我制作了这个示例应用程序来学习如何一起使用 react-router-dom 和 redux，一切正常，除了，我看不到如何访问组件内的 props？

所有代码都在这里https://gist.github.com/kristiannissen/b9a9ef1904eb40af9c305e06af4cf0fc

入口文件 index.js

import { render } from 'react-dom'
import React from 'react'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'

import App from './app'
import { store, history } from './store'

render(
    <Provider store={ store }>
        <App />
    </Provider>, document.getElementById('app'))

App.js

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import Main from './main'
import * as projectActions from './actions/project'

const mapStateToProps = (state) => {
    return {
        project: state.project
    }
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        ...projectActions
    }, dispatch)
}

const App = connect(mapStateToProps,
    mapDispatchToProps)(Main)

export default App

main.js

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'

import {
    combineReducers,
    createStore,
    compose,
    applyMiddleware
} from 'redux'
import {
    ConnectedRouter,
    routerReducer,
    routerMiddleware
} from 'react-router-redux'

import {
    history,
    store
} from './store'

const Home = ({ match }) => (
    <div>Home</div>
)

const Tacos = ({ match }) => (
    <div>
        Tacos to order: 
        <Link to={`${match.url}/plain`}>Plain</Link>
        <Link to={`${match.url}/cheese`}>Cheese</Link>
        <Link to={`${match.url}/chipotle`}>Chipotle</Link>
        <div>
            <Route path={`${match.url}/:kind`} component={ Taco } />
        </div>
    </div>
)

const Taco = ({ match }) => (
    <div>You ordered {match.params.kind}</div>
)

const Main = (props) => (
    <ConnectedRouter history={ history }>
        <div>
            <Link to="/">Home</Link>
            |
            <Link to="/tacos">Tacos</Link>
            <div>
                <Route path="/" component={ Home } {...props}/>
                <Route path="/tacos" component={ Tacos } {...props}/>
            </div>
        </div>
    </ConnectedRouter>
)


export default Main

store.js

import createHistory from 'history/createHashHistory'
import {
    createStore,
    compose,
    applyMiddleware
} from 'redux'
import {
    routerMiddleware
} from 'react-router-redux'

import rootReducer from './reducers/index'
import { project } from './data'

const initialState = {
    project
}

export const history = createHistory()

export const store = createStore(rootReducer,
    initialState, compose(
    applyMiddleware(routerMiddleware(history))
))

我认为这些是设置中最重要的文件。我的问题是，如何从 Taco 组件内部访问我在操作中拥有的 props.newProject() 函数？使用 React 开发人员工具，我可以看到我的路由器可以访问 props.newProject() 但它不存在于 Taco 级别。

我应该使用 {...props} 将 props 传递给 Taco 组件还是有更聪明的方法？

我使用了https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux 和https://reacttraining.com/react-router/web/example/preventing-transitions 作为参考。

Answer 1

一种方法是将您的组件（如Taco）连接到redux 存储单独（使用connect），然后使用mapStateToProps 和mapDispatchToProps 仅公开相关的状态和相关的函数（比如调用dispatch(someNewAction()) 到组件的函数。

因此，您将拥有一个 <TacoContainer /> 组件（连接到 redux 存储），而 那个 将是您在路由中指定的组件。

这样组件本身就知道它应该如何与商店交互。然后将组件作为一个独立的东西使用变得更容易，因为它已经知道所有（或大部分）棘手的细节，所以每次使用它时都不需要传递大量的 props 和 dispatch 方法。 （如果需要，你仍然可以从外部传递额外的道具。）