The best of both worlds.

// frontend/ProductCard/index.jsx import { connect } from 'react-redux'; import { isOnlineOnly } from '../selectors'; + import OnlineBadge from '../OnlineBadge'; const ProductCard = ({ product, onlineOnly }) => ( <Card> <Title>{product.name}</Title> - <Price value={product.price} /> + <Price value={product.price} highlight /> + {onlineOnly && <OnlineBadge />} </Card> ); export default connect((state, { product }) => ({ onlineOnly: isOnlineOnly(state, product.id), }))(ProductCard);

// extension/steps/addOnlineOnly.js // Hook: afterFetchProducts const axios = require('axios'); module.exports = async (context, { products }) => { const { erpUrl, erpToken } = context.config; const { data } = await axios.get(`${erpUrl}/online-only`, { headers: { Authorization: `Bearer ${erpToken}` }, }); const ids = new Set(data.productIds); return { products: products.map(p => ({ ...p, onlineOnly: ids.has(p.id), })), }; };