react-fetch-queue
v1.0.0
Published
Sometimes, you want to fetch data by userId, but you have to strip the duplicated id. That's very fussy. Now you can use this plugin.
Downloads
8
Readme
Sometimes, you want to fetch data by userId, but you have to strip the duplicated id. That's very fussy. Now you can use this plugin.
Installation
yarn add react-fetch-queue
# 或者
npm install react-fetch-queue --save
Usage
import React, { FunctionComponent } from 'react';
import { connect } from 'react-redux';
import { Queue } from 'react-fetch-queue';
import { fetchDataAction } from '../xxx';
const myQueue = new Queue({
property: 'id',
shouldInsert: (props: Props) => !props.data,
onFetch: (props, ids) => ids.map((id) => props.fetchData(id)),
});
interface Props {
id: number;
fetchData: (id: number) => Promise;
data: Array<{ id: number, name: string }>;
}
const UserName: FunctionComponent<Props> = (props) => {
myQueue.insert(props.id);
if (!props.data) {
return <span>--</span>;
}
return <span>{props.data.name}</span>;
};
const mapStateToProps = (state, ownProps: Props) => {
return {
data: state.xxxData.find((item) => item.id === ownProps.id),
};
};
const mapDispatchToProps = {
fetchData: fetchDataAction,
};
export const connect(mapStateToProps, mapDispatchToProps)(UserName);
Options
property: string
The class collect your value of this property, and throw out when invoking method onFetch(props, keys)
shouldInsert(props): boolean
Enable or disable the behavior that insert property_value from props.
onFetch(props, keys): Promise | Promise[]
Run Action in proper time.