使用 mapDispatchToProps 的 Redux 连接容器不起作用答案

【问题标题】：Redux connecting container using mapDispatchToProps not working使用 mapDispatchToProps 的 Redux 连接容器不起作用
【发布时间】：2018-12-03 01:41:46
【问题描述】：

我正在学习 Redux。我正在尝试将调度功能从容器组件连接到表示组件。

容器组件：

//FILE : app/javascript/packs/containers/registration.js 

import { connect } from 'react-redux'

import { fetchCountry } from '../actions'

import Countries from '../components/registration/countries';

const getCountry = (state, filter) => {
  switch (filter) {
  case 'region':
  console.log("Get Country Triggered",state)
  default:
  console.log("Get Country Default Triggered",state)
 }
}

const mapStateToProps = state => ({
  countries:getCountry(state,'region')
})

const mapDispatchToProps = dispatch => ({
  fetchCountry: region => dispatch(fetchCountry(region))
})

export default connect(
  mapStateToProps, 
  mapDispatchToProps
)(Countries)

演示组件

// FILE : /app/javascript/packs/components/registration/countries.jsx

import React from 'react'
import PropTypes from 'prop-types'

const Countries = ({ fetchCountry }) => (
  <ul>
    <li> 
     <button onClick={() => fetchCountry('region')}>Get Country</button> 
    </li>
  </ul>
)

Countries.propTypes = {
  fetchCountry: PropTypes.func.isRequired
}

行动：

//FILE : /app/javascript/packs/actions/index.js

/* Action types */

export const FETCH_COUNTRY = "FETCH_COUNTRY";
export const FETCH_CITY = "FETCH_CITY";

/* Action creators */

export function fetchCountry(region) {
  return { type: FETCH_COUNTRY, region };
}

减速器

// FILE: /app/javascript/packs/reducers/fetchPlace.js 

const fetchPlace = (state = [], action) => {
 switch (action.type) {
 case 'FETCH_COUNTRY':
  console.log('FETCH COUNTRY Reducer');
 default:
  return state
 }
}

export default fetchPlace

当我尝试加载页面时，我是 fetchCountry 是未定义的错误。

warning.js:33 Warning: Failed prop type: The propfetchCountryis marked as required inCountries, but its value isundefined.

我明白，我在这里缺少一些基础知识，我们将不胜感激。

【问题讨论】：

您的操作中有索引文件吗？
你的actions.js在正确的文件夹里吗？，
你应该尝试在const getCountry之前写console.log(fetchCountry )，看看是undefined还是function
感谢您的快速回复，我检查了文件路径及其正确性。我还更新了文件路径。

标签： reactjs redux react-redux

【解决方案1】：

也许这条线是你的问题。取决于你是否有index.js

import { fetchCountry } from '../actions'

应该是

import { fetchCountry } from '../actions/action_file_name'

【讨论】：

感谢您的快速回复，我检查了文件路径及其正确性。我还更新了文件路径。