使react/redux实现模式可重用

Question

我通过调用页面组件的componentDidMount方法中的页面容器mapDispatchToProps方法，在react/redux应用程序页面中实现了按需加载逻辑。

按需加载逻辑由页面组件及其容器中的以下行组成：

import { isEmpty, isNil } from 'lodash';
import {SimplActions} from 'simpl-react/lib/actions';
class LoadOnDemandPage extends React.Component {
componentDidMount() {
const {run, loadedRun, loadRunData} = this.props;
loadRunData(run, loadedRun);
}

.....

}
LoadOnDemandPage.propTypes = {
run: PropTypes.object.isRequired,
loadedRun: PropTypes.object,
loadRunData: PropTypes.func.isRequired,
};
function mapStateToProps(state, ownProps) {
...
return {
run,
loadedRun: state.simpl.loaded_run,
};
}
const mapDispatchToProps = dispatch => {
return {
loadRunData(run, loadedRun) {
if (!isNil(run)) {
if (isEmpty(loadedRun) || run.pk != loadedRun.pk) {
// load run's world data
const runId = run.id;
const topic = `model:model.run.${runId}`;
dispatch(SimplActions.getDataTree(topic));
dispatch(SimplActions.setLoadedRun(runId));
}
}
},
};
};
const module = connect(
mapStateToProps,
mapDispatchToProps
)(LoadOnDemandPage);
export default withRouter(module);

现在，我想在其他页面和其他应用程序中使用相同的mapDispatchToPropsloadRunData方法，方法是将其移动到外部库中。

这个逻辑可以重用吗？还是必须在使用这个模式的每个页面组件中复制它？FWIW我使用的是react v16和redux v3。

Answer 1

您可以创建一个使用dispatch的currying函数，保存在某个utils文件夹中：

// above import dependencies
const loadRunDataBuilder = dispatch => (run, loadedRun) {
if (!isNil(run)) {
if (isEmpty(loadedRun) || run.pk != loadedRun.pk) {
// load run's world data
const runId = run.id;
const topic = `model:model.run.${runId}`;
dispatch(SimplActions.getDataTree(topic));
dispatch(SimplActions.setLoadedRun(runId));
}
}
},

现在，您可以在任何组件导入该函数，并通过调度调用它

const mapDispatchToProps = dispatch => {
return {
loadRunData: loadRunDataBuilder(dispatch)
},
};