Stocks.js

import React, { useEffect } from 'react'
import { useStore, useActions } from '../store'

function Stocks () {
  // stocks is destructured from the store object for convenience
  const { stocks } = useStore()
  const actions = useActions()

  // calls the API on component mount
  useEffect(() => {
    actions.stocks.fetchStocks()
  }, [])

  return (
    <div>
      <ul>
      {stocks.data && stocks.data.map(stock => (
        <li key={stock.id}>{stock.title}</li>
      ))}
    </ul>
    <button onClick={actions.stocks.fetchStocks}>Refresh stocks</button>
    </div>
  )
}

export default Stocks