如何在React&Redux应用程序中调度事件处理程序中的操作

我的代码在这里: https://stackblitz.com/edit/react-8g3p3l

有2个 哑组件 :

• 插入“citylist.jsx”,代码如下:
• 插入“shoplist.jsx”,代码如下:

我希望从 inseriton_citylist.jsx 将在中触发商店列表上的更改 insertion_shoplist.jsx . 所以我的 容器组件 , app.js 包含一个函数 findShops 在哪里行动 shoplist(city) 被称为。

我的容器组件代码, app.jsx ,如下所示:

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 =>
    shops
      ? shops.map(shop => <option key={shop.id} value={shop.name} />)
      : null; */
  render() {
    console.log("render:" + this.props);
    return (
      <div>
        <CityList data={this.props.data} findShops={this.findShops.bind(this)} />
        <ShopList {...this.props} />
        {/* <input list="shop" placeholder="shop" />
        <datalist id="shop">
          {this.renderShops(this.props.shop_data.shops)}
        </datalist> */}
      </div>
    );
  }
}

const mapStateToProps = state => {
  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&t=1721s
  //return { city_data: state.cities, shop_data: state.shops };
};

const mapDispathToProps = dispatch => {
  console.log("map dispatch to props");
  return bindActionCreators({ citylist, shoplist }, dispatch);
};

export default connect(
  mapStateToProps,
  mapDispathToProps
)(App);

当下拉列表中的城市发生更改时,可以成功调用“findshops”,但似乎“this.props.shopList()”只是在不调用*reducer*的情况下调用了操作。“actions/index.js”中的actions代码如下:

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
  };
}

问题 :当前代码能够触发事件处理程序 findShops() ,但未能成功更改城市列表 state 因此城市名单上 insertion_citylist.jsx 一直保持不变。有人能帮忙吗?

事先谢谢!