代码之家  ›  专栏  ›  技术社区  ›  Jwan622

是什么让我们的Action Creator成为React中的道具?

  •  0
  • Jwan622  · 技术社区  · 8 年前

    我有这个密码:

    import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import { bindActionCreators } from 'redux';
    import { fetchWeather } from '../actions/index';
    
    class SearchBar extends Component {
      constructor(props) {
        super(props);
    
        this.state = { term: '' };
    
        this.onInputChange = this.onInputChange.bind(this);
        this.onFormSubmit = this.onFormSubmit.bind(this);
      }
    
      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} className="input-group">
            <input
              placeholder="Get a five-day forecast in your favorite cities"
              className="form-control"
              value={this.state.term}
              onChange={this.onInputChange}
            />
    
            <span className='input-group-btn'>
              <button type="submit" className="btn btn-secondary">
                Submit
              </button>
            </span>
          </form>
        );
      }
    }
    
    function mapDispatchToProps(dispatch) {
      return bindActionCreators({ fetchWeather }, dispatch)
    }
    
    export default connect(null, mapDispatchToProps)(SearchBar);
    

    在本教程中,作者曾说过 mapDispatchToProps 连接我们的动作创造者 fetchWeather 到我们的组件。但真的吗?它不是将动作从我们的动作创造者发送到我们的还原者吗?

    究竟是什么让我们的组件能够作为 props ?

    1 回复  |  直到 8 年前
        1
  •  1
  •   Smolin Pavel    8 年前

    你可以

    const mapDispatchToProps = { fetchWeather };
    

    而不是

    function mapDispatchToProps(dispatch) {
      return bindActionCreators({ fetchWeather }, dispatch)
    }
    

    无论如何,这是一个块,使你的行动创造可通过 this.props .

    推荐文章