Как отправить действие в обработчик событий в приложении React & Redux

Question

Мой код здесь: https://stackblitz.com/edit/react-8g3p3l

Есть 2 немых компонентов :

• inserttion_citylist.jsx со следующим кодом:
• inserttion_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` выглядит так:

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 просто остается неизменным все это время. Может ли кто-нибудь помочь в этом?

Заранее спасибо!

Answer 1

получается очень простой вопрос

onChange={(e) => props.findShops(e)}

здесь вы передаете e в качестве параметра

findShops(city) {        
    this.props.shoplist(city);
  }

и его использование напрямую, это недопустимо, так как в параметре вашего города будет событие.

вам нужно e.target.value

изменение

 <select name="city"
 onChange={(e) => props.findShops(e)}>{renderCities(props.data.cities)}</select>

до

<select name="city"
 onChange={(e) => props.findShops(e.target.value)}>{renderCities(props.data.cities)}</select>

Демо , Помните, что при изменении значения передается событие, вам нужно извлечь значение, когда вы читаете из него. как вы делаете в javascript или jquery.

для флажков его e.target.checked и для входных данных его e.target.value.