UNPKG

@wordpress/data

Version:
8 lines (7 loc) 4.36 kB
{ "version": 3, "sources": ["../../../src/components/with-dispatch/index.js"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useDispatchWithMap } from '../use-dispatch';\n\n/** @typedef {import('react').ComponentType} ComponentType */\n\n/**\n * Higher-order component used to add dispatch props using registered action\n * creators.\n *\n * @param {Function} mapDispatchToProps A function of returning an object of\n * prop names where value is a\n * dispatch-bound action creator, or a\n * function to be called with the\n * component's props and returning an\n * action creator.\n *\n * @example\n * ```jsx\n * function Button( { onClick, children } ) {\n * return <button type=\"button\" onClick={ onClick }>{ children }</button>;\n * }\n *\n * import { withDispatch } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * const SaleButton = withDispatch( ( dispatch, ownProps ) => {\n * const { startSale } = dispatch( myCustomStore );\n * const { discountPercent } = ownProps;\n *\n * return {\n * onClick() {\n * startSale( discountPercent );\n * },\n * };\n * } )( Button );\n *\n * // Rendered in the application:\n * //\n * // <SaleButton discountPercent=\"20\">Start Sale!</SaleButton>\n * ```\n *\n * @example\n * In the majority of cases, it will be sufficient to use only two first params\n * passed to `mapDispatchToProps` as illustrated in the previous example.\n * However, there might be some very advanced use cases where using the\n * `registry` object might be used as a tool to optimize the performance of\n * your component. Using `select` function from the registry might be useful\n * when you need to fetch some dynamic data from the store at the time when the\n * event is fired, but at the same time, you never use it to render your\n * component. In such scenario, you can avoid using the `withSelect` higher\n * order component to compute such prop, which might lead to unnecessary\n * re-renders of your component caused by its frequent value change.\n * Keep in mind, that `mapDispatchToProps` must return an object with functions\n * only.\n *\n * ```jsx\n * function Button( { onClick, children } ) {\n * return <button type=\"button\" onClick={ onClick }>{ children }</button>;\n * }\n *\n * import { withDispatch } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * const SaleButton = withDispatch( ( dispatch, ownProps, { select } ) => {\n * // Stock number changes frequently.\n * const { getStockNumber } = select( myCustomStore );\n * const { startSale } = dispatch( myCustomStore );\n * return {\n * onClick() {\n * const discountPercent = getStockNumber() > 50 ? 10 : 20;\n * startSale( discountPercent );\n * },\n * };\n * } )( Button );\n *\n * // Rendered in the application:\n * //\n * // <SaleButton>Start Sale!</SaleButton>\n * ```\n *\n * _Note:_ It is important that the `mapDispatchToProps` function always\n * returns an object with the same keys. For example, it should not contain\n * conditions under which a different value would be returned.\n *\n * @return {ComponentType} Enhanced component with merged dispatcher props.\n */\nconst withDispatch = ( mapDispatchToProps ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( ownProps ) => {\n\t\t\tconst mapDispatch = ( dispatch, registry ) =>\n\t\t\t\tmapDispatchToProps( dispatch, ownProps, registry );\n\t\t\tconst dispatchProps = useDispatchWithMap( mapDispatch, [] );\n\t\t\treturn <WrappedComponent { ...ownProps } { ...dispatchProps } />;\n\t\t},\n\t\t'withDispatch'\n\t);\n\nexport default withDispatch;\n"], "mappings": ";AAGA,SAAS,kCAAkC;AAK3C,SAAS,0BAA0B;AA2FzB;AANV,IAAM,eAAe,CAAE,uBACtB;AAAA,EACC,CAAE,qBAAsB,CAAE,aAAc;AACvC,UAAM,cAAc,CAAE,UAAU,aAC/B,mBAAoB,UAAU,UAAU,QAAS;AAClD,UAAM,gBAAgB,mBAAoB,aAAa,CAAC,CAAE;AAC1D,WAAO,oBAAC,oBAAmB,GAAG,UAAa,GAAG,eAAgB;AAAA,EAC/D;AAAA,EACA;AACD;AAED,IAAO,wBAAQ;", "names": [] }