Question

由于使用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”不会引起任何副作用。这样打两次电话可以吗？

沿着这些相同的思路，redux文档似乎在“容器组件”中添加了一点逻辑-参见here

Answer 1

假设您使用的是redux-thunk，则可以从mapDispatchToProps方法中完美地调度多个操作。

如果您只是在使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

mapDispatchToProps函数中的两个调度调用

1 个答案: