Соединительный контейнер Redux с использованием mapDispatchToProps не работает - PullRequest
Новая
       6

Соединительный контейнер Redux с использованием mapDispatchToProps не работает

0 голосов
/ 24 июня 2018

Я изучаю 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 };
}

1012 * Переходник * 

// 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 prop fetchCountry is marked as required in Страна , but its value is неопределенный .

Я понимаю, что здесь не хватает некоторых основ, любая помощь будет высоко оценена.

1 Ответ

0 голосов
/ 24 июня 2018

Может быть, эта линия - твоя проблема.Зависит от того, если у вас index.js

import { fetchCountry } from '../actions'

должно быть 

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