Два вызова отправки в функции mapDispatchToProps - PullRequest
Новая
       1

Два вызова отправки в функции mapDispatchToProps

1 голос
/ 24 апреля 2019

Из-за моего API мне нужно получать данные в два отдельных вызова.У меня есть общее асинхронное действие redux-thunk, которое принимает параметры, поэтому его можно назвать несколькими способами.

ShowPeopleContainer: 

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)

ShowPeoplePresentation: 

class ShowPeoplePresentation extends React.Component {
  componentDidMount() {
    this.props.getData();
  }
  render() {
    return(
     <>
      <ShowPeople people={this.props.managers} />
      <ShowPeople people={this.props.employees} />
     </>
     );
   }
}

Я не думаю, что getData вызывает какие-либо побочные эффекты.Можно ли дважды вызывать диспетчеризацию, как это?

Вдоль этих же строк документы с избыточным количеством слов, похоже, вносят небольшую логику в «компонент контейнера» - см. здесь

1 Ответ

1 голос
/ 25 апреля 2019

Вы можете отлично распределять действия мьютлипа из метода 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

...