Два вызова отправки в функции mapDispatchToProps
Из-за моего API мне нужно получать данные двумя отдельными вызовами. У меня есть общее асинхронное действие redux-thunk, которое принимает параметры, поэтому его можно вызвать несколькими способами.
ПоказатьПеоплеКонтейнер:
import { fetchPeople } from './actions';
import { getEmployees, getManagers } from './selectors';
const mapDispatchToProps = dispatch({
getData: () => {
dispatch(fetchPeople('employees'));
dispatch(fetchPeople('managers'));
}
});
const mapStateToProps = state => ({
employees: getEmployees(state),
managers: getManagers(state)
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(MyComponentPresentation)
ПоказатьЛюдиПрезентация:
class ShowPeoplePresentation extends React.Component {
componentDidMount() {
this.props.getData();
}
render() {
return(
<>
<ShowPeople people = {this.props.managers} />
<ShowPeople people = {this.props.employees} />
</>
);
}
}
Я не думаю, что «getData» вызывает какие-либо побочные эффекты. Можно ли вызывать диспетчеризацию дважды, как это?
В том же духе документы редукса, похоже, добавляют немного логики в «Контейнерный компонент» - см. здесь
Ответы 1
Вы можете отлично отправлять несколько действий из метода mapDispatchToProps, учитывая, что вы используете redux-thunk.
Однако будет лучше и читабельнее, если вы просто добавите эту логику при создании getData в качестве создателя действий, например
const getData = () => {
return (dispatch) => {
dispatch(fetchData('employees'));
dispatch(fetchData('managers'));
}
}
и использовать его как
const mapDispatchToProps = dispatch({
getData: () => {
dispatch(getData());
}
});
Вы также можете отправить fetchData и вызвать его из компонента, например
const mapDispatchToProps = dispatch({
fetchData: (type) => {
dispatch(fetchData(type));
}
});
и в компоненте
getData = () => {
const {fetchData} = this.props;
fetchData('employees');
fetchData('managers');
}
В приведенном выше решении вы не зависите от redux-thunk, чтобы разрешить несколько dispatch
Я исхожу из фона MVVM, и наши ViewModels будут загружать все данные при инициализации, и это может быть много данных. Поэтому кажется странным создавать специфичные для компонента методы инициализации в виде универсального модуля создателей действий.
Вы можете просто следовать второму шаблону, который сохраняет специфичную для компонента логику внутри самого компонента.
Возможный дубликат Куда отправить несколько действий в редуксе?