如何从redux store传递道具

Question

我有一个简单的应用程序，使用redux和react-router。我将我的应用程序组件包装在一个提供者标签中，以便它可以访问商店。我(在App.js中)在App.js中连接了mapStateToProps和mapStateToDispatch。我不确定如何将在App.js中定义的函数传递给子组件，因为我正在使用路由。我试着做渲染技巧，但它不起作用。如果我可以将它传递给CelebrityPage组件，我将如何在文件中接收它？任何帮助都将不胜感激。

这是我的App.js

import React, { Component } from 'react';
import { connect } from 'react-redux'
import './App.css';
import Clarifai from 'clarifai'

// import Particles from 'react-particles-js';
// import particlesOptions from './particleOptions'
import { Signin } from './components/signin/Signin';
import Register from './components/register/Register';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

import { setSearchField } from './context/Actions'
import FacePage from './Containers/FacePage';
import CelebrityPage from './Containers/CelebrityPage';
import ControllerPage from './Containers/ControllerPage';

const mapStateToProps = state => {
  return {
    input: state.input
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleSearchChange: (event) => dispatch(setSearchField(event.target.value))
  }
}
...
 render() {

    return (<Router>
      <Switch >
        <Route path='/celebrity' exact render={props => <CelebrityPage{...props} handleSearchChange={this.handleSearchChange} />} />
        <Route path='/' exact component={Register} />
        <Route path='/signin' exact component={Signin} />
        <Route path='/contoller' exact component={ControllerPage} />
        <Route path='/face-detection' exact component={FacePage} />
      </Switch>
    </Router>)
  }

}


export default connect(mapStateToProps, mapDispatchToProps)(App)

Answer 1

如果你打算将存储操作和状态传递给子组件，这意味着你拒绝使用redux的优点。最好的方法应该是将需要访问操作或状态的任何组件连接到存储。在根组件级别进行连接并将道具传递给子组件不是一个好的解决方案。

Answer 2

我认为robert所说的就是你可能想要做的。不要试图在你的<Route>中传递你的道具。取而代之的是在CelebrityPage组件中执行connect mapDispatchToProps和mapStateToProps。

一旦您在Celebrity Page组件中完成了包装，您就应该可以访问您定义的属性和函数。

... 
// keep all the previous imports from your App.Js
 render() {

// have your router like this
    return (<Router>
      <Switch >
        <Route path='/celebrity' exact component ={CelebrityPage} />
        <Route path='/' exact component={Register} />
        <Route path='/signin' exact component={Signin} />
        <Route path='/contoller' exact component={ControllerPage} />
        <Route path='/face-detection' exact component={FacePage} />
      </Switch>
    </Router>)
  }
}
export default App

名人页面示例

import React from 'react'
import { connect } from 'react-redux'
class CelebrityPage extends React.Component {
  
// put your mapStateToProps and mapDispatch function heres instead of app.js

mapStateToProps() {

}
mapDispatchToProps {
 // bind your handlesearch function to props here
}
 render() {
   return (
  <div>
    <input />
    <button onClick={this.props.handleSearchChange}/>
  </div>
  )
 }
}
export default connect(mapStateToProps, mapDispatchToProps)(CelebrityPage)