Replace unnecessary `@wordpress/compose` with `useSelect` and `useDispatch` hooks

[ecgan]

Is your feature request related to a problem?

Found in version: https://github.com/woocommerce/pinterest-for-woocommerce/releases/tag/1.0.0-beta.2

I happen to notice that we are bundling @wordpress/compose:

https://github.com/woocommerce/pinterest-for-woocommerce/blob/d8aa2db15074ecfcabb62af2c5bb925aad18751d/webpack.config.js#L7

And we are using compose function in the following two places only:

https://github.com/woocommerce/pinterest-for-woocommerce/blob/d8aa2db15074ecfcabb62af2c5bb925aad18751d/assets/source/catalog-sync/components/TransientNotices/index.js#L30-L39

https://github.com/woocommerce/pinterest-for-woocommerce/blob/d8aa2db15074ecfcabb62af2c5bb925aad18751d/assets/source/setup-guide/app/components/TransientNotices/index.js#L30-L39

The above two usages can be replaced with useSelect and useDispatch hooks. By doing that, we do not need to use and bundle @wordpress/compose anymore, which would reduce the JS bundle size.

Describe the solution you'd like

Replace compose usage with useSelect and useDispatch hooks, and then remove the @wordpress/compose dependency.

[haszari]

Thanks @ecgan – I agree. The principle here is: prefer React hooks over HoCs.

[haszari]

See also #12