Question

我在从REACT-REDUX中的ACTIONS调度函数时遇到了问题。

我有一个＆＃39;动作＆＃39; （actions / index.js）如下：

import axios from 'axios';

const API_KEY = 'sdfmbsjfsdf78fsdf78s78fs87f7s2bc5';
const ROOT_URL = `http://api.example.org/data/2.5/weather?appid=${API_KEY}`;

export const FETCH_WEATHER = 'FETCH_WEATHER';

export function fetchWeather(city){
  const url = `${ROOT_URL}&q=${city},pk`;
  const request = axios.get(url);

  console.log("Request in Actions: ", request); // this line is not showing in console because DISPATCHED action is not coming here

  return {
    type: FETCH_WEATHER,
    payload: request
  };
}

而且，我有一个＆＃39;容器＆＃39;名为＆＃39; SearchBar＆＃39; （containers / SearchBar.js）其中＆＃39; mapDispatchToProps＆＃39;被写成：

import React from 'react';
import { connect } from 'react-redux';
import fetchWeather from '../actions/index';

class SearchBar extends React.Component{
  constructor(props){
    super(props);

    this.state = { term: '' };
  }

  onInputChange(event){
    this.setState({ term: event.target.value });
  }
onFormSubmit(event){
    event.preventDefault();

    this.props.fetchWeather(this.state.term);
    this.setState({ term: ''});
  }

  render(){
    return(
      <form onSubmit={ this.onFormSubmit.bind(this) } className="input-group">
        <input
          className="form-control"
          placeholder="Search your favourite cities to get a five-day forecast"
          value={ this.state.term }
          onChange={ this.onInputChange.bind(this) }
          />
        <span className="input-group-btn">
          <button type="submit" className="btn btn-secondary">Search</button>
        </span>
      </form>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    fetchWeather: (city) => {
      dispatch({
        type: "FETCH_WEATHER"
      });
    }
  };
};

export default connect(null, mapDispatchToProps)(SearchBar);

问题：

我的问题是：每当我在 SEARCH BAR 中写一些文字，然后点击SearchBar.js中的搜索按钮， mapDispatchToProps 未触发actions / index.js文件中的 fetchWeather 操作，即无法访问控制台console.log("Request in Actions: ", request);。

注意： 我只需要使用最新的mapDistpatchToProps。这也有效return bindActionCreators({fetchWeather}, dispatch);但不寻找OLD的东西。

请帮忙。感谢

Answer 1

进一步调试后编辑（见评论）......

您的mapDispatchToProps函数应该是：

const mapDispatchToProps = (dispatch) => {
  return {
    fetchWeather: (city) => dispatch(fetchWeather(city))
  };
};

意味着this.props.fetchWeather(city)已映射到dispatch(fetchWeather(city))（您的代码错过了映射第二部分中的fetchWeather部分。）

然后导入fetchWeather时出现问题，因为您没有将其导出为默认值，而是导入它。你可以做以下两件事之一：

为您的导入添加花括号，以便它不会导入为默认值：import { fetchWeather } from '../actions/index';
将其导出为默认值：export default function fetchWeather(city){...}

我测试了修改1并调度了操作。

~~如果没有，你可以调查你的方法绑定（onFormSubmit，onInputChange），就像尝试在构造函数中完成绑定的标准做法一样。~~

如何在容器中正确使用/绑定mapDispatchToProps来调用动作创建者

1 个答案: