mobx-redux-clipboard.jsx

import { types, flow } from "mobx-state-tree"
import Api from '...'

export const UserStore = types.model({
  user: types.reference(User),
  fetchStatus: types.enumeration(["success", "pending", "error"])
})
.actions(store => ({
  fetchUser: flow(function* (id) {
    store.fetchStatus = "pending"
    try {
      const user = yield Api.fetchUser(id)
      store.fetchStatus = "success"
      store.user = user
    } catch (e) {
      store.fetchStatus = "error"
    }
  })
}))

export const UserStore = types.model({
  user: types.reference(User)
})
.views(store => ({
  // This is a view, but if the underlying data changes,
  // it will trigger a rerender for observing components
  avatarURL() {
    return store.user.avatarURL
  }
}))

export const Avatar = observer(function Avatar() {
  const { userStore } = useStores()

  const avatarURL = userStore.avatarURL
  return (
    <img src={avatarURL} />
  )
})





const CartItem = types.model({
  id: types.identifier,
  quantity: types.number
})
.actions(item => ({
  add() {
    item.quantity += 1
  }
}))

export const Cart = types.model({
  items: types.map(CartItem),
})
.actions(cart => ({
  addToCart(id) {
    if (cart.items.has(id)) {
      cart.items.get(id).add()
    } else {
      cart.items.push(id, { quantity: 1 })
    }
  },
  checkOut() {
    cart.items = {}
  }
}))


export const addToCart = productId => {
  cartStore.addToCart(productId)
}
export const checkout = () => {
  shop.buyProducts(products, () => {
    cartStore.checkout()
  })
}


import {
  ADD_TO_CART,
  CHECKOUT_REQUEST,
  CHECKOUT_FAILURE
} from '../constants/ActionTypes'
const initialState = {
  addedIds: [],
  quantityById: {}
}
const addedIds = (state = initialState.addedIds, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      if (state.indexOf(action.productId) !== -1) {
        return state
      }
      return [ ...state, action.productId ]
    default:
      return state
  }
}
const quantityById = (state = initialState.quantityById, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      const { productId } = action
      return { ...state,
        [productId]: (state[productId] || 0) + 1
      }
    default:
      return state
  }
}
export const getQuantity = (state, productId) =>
  state.quantityById[productId] || 0
export const getAddedIds = state => state.addedIds
const cart = (state = initialState, action) => {
  switch (action.type) {
    case CHECKOUT_REQUEST:
      return initialState
    case CHECKOUT_FAILURE:
      return action.cart
    default:
      return {
        addedIds: addedIds(state.addedIds, action),
        quantityById: quantityById(state.quantityById, action)
      }
  }
}
export default cart