Я запустил простую систему React / Redux с использованием response-redux, в основном скопированную с примеров.(В конечном итоге я хочу разработать более сложную систему, для которой будет подходить redux.)
У меня есть вещи, называемые Places, с идентификатором placeCode.Все детали каждого Места хранятся в базе данных Мест на сервере.В целом все работает нормально (с большой помощью документации и блогов).Однако я не могу выяснить, как сделать то, что, как я ожидал, было простым.
Существует placeReceived action и процедура fetchPlace для поиска базы данных на сервере, чтобы получить Place.record
function placeReceived(place) {
return {
type: actionTypes.PLACE_RECEIVED,
place,
};
}
export function fetchPlace(placecode) {
return dispatch => fetch(`/places/${placecode}`)
.then(response => response.json())
.then(data => dispatch(placeReceived(data.data)))
.catch(e => console.log(e));
}
Соответствующая часть редуктора равна
const initialState = {
place: { placeCode: 'HcN' },
};
export default (state = initialState, action) => {
const updated = { ...state };
switch (action.type) {
case constants.PLACE_RECEIVED:
updated.place = action.place;
return updated;
default:
return state;
}
};
Один компонент - PlaceDetails, который показывает placeCode и placeName.
import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
class PlaceDetails extends Component {
render() {
const place = this.props ? this.props.place : { placeCode: '' };
const placeName = place.placeCode ? `${place.placeCode} ${place.placeName}` : 'Missing Place';
return (
<Fragment>
{placeName}
</Fragment>
);
}
}
const mapStateToProps = state => ({
place: state.plac.place,
});
export default connect(mapStateToProps)(PlaceDetails);
Если я соединю их вместе, поместив
componentDidMount() {
const { dispatch } = this.props;
dispatch(fetchPlace('BBR'));
}
в класс PlaceDetails для поиска постоянного Place, тогда все это будет работать, и PlaceDetails покажет BBR и его placeName посмотрел вверхиз базы данных.
Однако я хочу выбрать placeCode с помощью раскрывающегося списка (на самом деле это каскад Ant Design), и я предположил, что могу просто вызвать fetchPlace в onChange() изэтот выпадающийКаскад работает отлично, и это, безусловно, вызывает fetchPlace с правильным аргументом, однако я не вижу никаких признаков того, что место является неправдоподобным (PlaceDetails упорно продолжает показывать свои по умолчанию, и контрольные точки не показаны действия, которые направляются).
1027 * Iчувствую, что я не понимаю некоторые основы React или Redux.
Как мне получить выбор в раскрывающемся списке, чтобы инициировать выборку места и, следовательно, обновление PlaceDetails?
Обновление
По просьбе стрельцов я создал урезанную песочницу моего клиента.Я новичок во всем этом, так что это заняло некоторое время.
Я не вижу, как поместить сервер node.js в песочницу, поэтому я предполагаю, что мне нужно найти способ, чтобы высмеивать выборки,Я посмотрел на sinon-stub-обещание и MockServer, и они кажутся сложными.fetch-mock кажется проще, но я еще не пробовал.Любой совет приветствуется, иначе, когда я настрою макеты, я снова обновлю этот вопрос.