If you are tired of the strange errors that are generated when invoke other's API, then this is your best choice. This tool create an aspect before and after invoking API, which used to check the incoming and received parameters' format. The check method based on prop-types of react.
npm install react-api-contract
import PropTypes from 'react-props';
const getUserAPI = {
name: 'GetAllUsers',
url: '/api/getUsers',
method: 'get',
response: {
list: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
entitle: PropTypes.string.isRequired,
department:PropTypes.string.isRequired,
age:PropTypes.number.isRequired,
})),
}
}
const addUserAPI = {
name: 'Add new User',
url: '/api/addUser',
method: 'post',
body: {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
department: PropTypes.string.isRequired,
entitle: PropTypes.string.isRequired,
},
response: PropTypes.string,
}
const store = combineAPI([
getUserAPI,
addUserAPI,
])
<APIProvider pool={store}>
//childrens
</APIProvider>
class ChildComp extends Component{
// ...
}
const mapAPIToProps = (api) => {
return {
getUsers: api.getUsers,
}
}
APIconnect(mapAPIToProps)(ChildComp);
class ChildComp extends Component{
// ...
componentDidMount() {
this.props.getUsers.fetch().then((data) => {
this.setState({
list: data.list,
})
})
}
// ...
}