Question

我是react-redux的新手，我想将一个动作从容器分发到组件。这是我的代码：

容器：

GC

AddCountry组件：

8TB

和动作文件

import { connect } from 'react-redux';
import addCountryComponent from '../../views/Country/AddCountry'
import { addCountry } from '../../actions/countryActions'


const mapDispatchToProps = (dispatch) => {
  return {
    addCountry:(country) => dispatch(addCountry(country))
  }
}


const CountryContainer = connect(null, mapDispatchToProps)(addCountryComponent)
export default CountryContainer;

我看不到import React, {Component} from 'react'; class AddCountry extends Component { constructor(props) { super(props); } componentDidMount() { console.log(this.props); } render() { return ( <div className="animated fadeIn"> asdas </div> ); } } export default AddCountry;是道具，我错过了什么吗？

Answer 1

如评论中所述，您应该将容器链接到路线文件。

这意味着浏览器打开此/add/country

时会调用您的容器

Answer 2

const mapDispatchToProps = dispatch => {
    return {
      addCountry: (country) => dispatch({ type: ADD_COUNTRY ,country})
    }}
TO  used it on click event 
you should make  add reducer for this app
example
const balance =(state={country:""},action)=>{
  switch(action.type){
    case ADD_COUNTRY:  return{ country: action.country;}
this.props.addCountry(country)

Answer 3

这是因为mapDispatchToProps向您的addCountryComponent自动添加了属性addCountry。

const mapDispatchToProps = (dispatch) => {
  return {
    // component that using this function will auto have addCountry in props of component 
    addCountry:(country) => dispatch(addCountry(country))
  }
}

// this addCountryComponent using mapDispatchToProps so it have addCountry in props
const CountryContainer = connect(null, mapDispatchToProps)(addCountryComponent)
export default CountryContainer;

Answer 4

您尝试使用Redux的bindActionCreators功能吗？

import { bindActionCreators } from 'redux';

const mapDispatchToProps = (dispatch) => bindActionCreators({
  addCountry: addCountry,
}, dispatch);

从容器中分派动作

4 个答案: