title: How to dispatch action in event handler in React & Redux application
body: <p>My code is here: <a href="https://stackblitz.com/edit/react-8g3p3l" rel="nofollow noreferrer">https://stackblitz.com/edit/react-8g3p3l</a></p>
  
  <p>There are 2 <em>dumb components</em>:</p>
  
  <ul>
  <li>insertion_citylist.jsx with the following code:</li>
  <li>insertion_shoplist.jsx with the following code:</li>
  </ul>
  
  <p>I expect the change on the selected city from the <code>inseriton_citylist.jsx</code> will trigger change on the shop list in <code>insertion_shoplist.jsx</code>. So my <em>container component</em>, <code>app.js</code> contains a function <code>findShops</code>, where the action <code>shoplist(city)</code> is called.</p>
  
  <p>My container component code, <code>app.jsx</code>, is the following:</p>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import { citylist, shoplist } from "../actions";
  import { bindActionCreators } from "redux";
  import CityList from "../components/insertion_citylist";
  import ShopList from "../components/insertion_shoplist";
  
  class App extends Component {
    componentDidMount() {
      console.log("mount");
      this.props.citylist();
      this.props.shoplist();
    }
  
    findShops(city) {
      console.log("findShops:", city);
      this.props.shoplist(city);
    }
  
    /* renderShops = shops =&gt;
      shops
        ? shops.map(shop =&gt; &lt;option key={shop.id} value={shop.name} /&gt;)
        : null; */
    render() {
      console.log("render:" + this.props);
      return (
        &lt;div&gt;
          &lt;CityList data={this.props.data} findShops={this.findShops.bind(this)} /&gt;
          &lt;ShopList {...this.props} /&gt;
          {/* &lt;input list="shop" placeholder="shop" /&gt;
          &lt;datalist id="shop"&gt;
            {this.renderShops(this.props.shop_data.shops)}
          &lt;/datalist&gt; */}
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; {
    console.log("map state to props:" + state.shops);
    return { data: state.insertion_data }; //Use of spread operator: https://www.youtube.com/watch?v=NCwa_xi0Uuc&amp;t=1721s
    //return { city_data: state.cities, shop_data: state.shops };
  };
  
  const mapDispathToProps = dispatch =&gt; {
    console.log("map dispatch to props");
    return bindActionCreators({ citylist, shoplist }, dispatch);
  };
  
  export default connect(
    mapStateToProps,
    mapDispathToProps
  )(App);
  </code></pre>
  The `findShops` can be called successfully when the city from the downdown list is changed, but seems that the `this.props.shoplist()` just called the action without calling the *reducer*. And the actions code from `actions/index.js` looks like this:
  
  <pre><code>export function citylist() {
    return { type: "CITY_LIST", payload: [{city:"Berlin"}, {city: "Frankfurt"}] };
  }
  
  export function shoplist(city) {
    let data = [{name:"original"},{name:"original 2"}];
    if (city === 'Frankfurt') data=[{name:"new"},{name:"new 2"}];
    return {
      type: "SHOP_LIST",
      payload: data
    };
  }
  </code></pre>
  
  <p><em>Problem</em>: The current code is able to trigger the event handler <code>findShops()</code>, but does not succeed in changing the city list <code>state</code> and thus the city list on the <code>insertion_citylist.jsx</code> just keeps unchanged all the while. Could anyone help on this? </p>
  
  <p>Thanks in advance! </p>