如何从 redux 商店传递道具

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 的优势。最好的方法应该是将需要访问操作或状态的任何组件连接到商店。在根组件级别进行连接并将 props 传递给子组件不是一个好的解决方案。

Answer 2

我认为罗伯特所说的是您可能想要做的事情。不要试图在你的<Route> 中传递你的道具。而是在 CelebrityPage 组件中使用 connect mapDispatchToProps 和 mapStateToProps。

在名人页面组件内部完成包装后，您应该可以访问您定义的道具和功能。

... 
// 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)