Svelte, Vue, Angular integrations (and maybe more?)

[dayhaysoos]

Now that use-shopping-cart is using redux under the hood, it's time to start trying to get other frameworks to integrate with it. I only know React, would love help from others who are more familiar with different UI frameworks. Here's a small video that explains how the react implementation works:

Important parts

The React implementation exists in /use-shopping-cart/react/index.js

This should be the format for future frameworks, for example:

/use-shopping-cart/vue/index.js

As far as the key, non-react parts go in your implementation, these are what you'll need to use:

// actions to bind and initialState for to default to
import { actions, initialState } from '../core/slice'


import {
// to create a working store
  createShoppingCartStore,
  // to be exported as a util function
  formatCurrencyString,
// to be exported as util function
  filterCart
} from '../core/index'

// helper to bind action creators so you can use the actions in `dispatch` 
import { bindActionCreators } from '@reduxjs/toolkit'

As far as implementation details:

createShoppingCartStore(props)

Props in this case is more or less a configuration object for initializing the project. With the React implementation, the props care getting passed to createShoppingCartStore. See below:

import ReactDOM from 'react-dom'
import { CartProvider } from 'use-shopping-cart'

import App from './App'

ReactDOM.render(
  <CartProvider
    mode="payment"
    cartMode="client-only"
    stripe={YOUR_STRIPE_API_KEY_GOES_HERE}
    successUrl="stripe.com"
    cancelUrl="twitter.com/dayhaysoos"
    currency="USD"
    allowedCountries={['US', 'GB', 'CA']}
    billingAddressCollection={true}
  >
    <App />
  </CartProvider>,
  document.getElementById('root')
)

The useShoppingCart hook itself:

export function useShoppingCart(
  selector = (state) => ({ ...state }),
  equalityFn
) {
  const dispatch = useDispatch()
  const cartState = useSelector(selector, equalityFn)

  const shoppingCart = React.useMemo(() => {
  // bindActionCreators wraps the actions in `dispatch` for you. It's actually more optimal if you do this manually
 // but I have no idea what that looks like
    const cartActions = bindActionCreators(actions, dispatch)
    return { ...cartState, ...cartActions }
  }, [cartState, dispatch])

  React.useDebugValue(shoppingCart)
  return shoppingCart
}

I will be updating this over time and providing a loom video to assist. Let me know if you have any questions or how I can help you!