Async action not being cached

[camillavk]

Hi!

I've been trying to get pullstate working on a react app as it sounds like exactly what I've been looking for. I'm struggling to get the Async actions working correctly. From the documentation I understand that when I beckon an Async action it should use a cached version if it has already been called, but mine seems to be calling the API each time.

I have the async action like this:

export const loadRestaurants = createAsyncAction(async ({ tag }) => {
  const result = await fetchRestaurants();
  
  return successResult(result);
}, {
  postActionHook: ({ result, stores }) => {
    if (!result.error) {
      RestaurantStore.update(s => {
        s.restaurants = result.payload;
      });
    }
  },
  cacheBreakHook: ({ result, timeCached }) => {
    return !result.error || timeCached + ONE_HOUR < Date.now();
  }
});

And I am trying to load the restaurants using beckon like this:

const RestaurantList = () => {
  const tag = 'restaurants';
  const [finished, { error, message, payload: restaurants }] = loadRestaurants.useBeckon({ tag });

  return (
    <>
      { !finished && <IonSpinner name="circles" color="primary" className={ styles.spinner }></IonSpinner>}
      { finished && restaurants && restaurants.map((restaurant, index) => {
        return (
          <RestaurantCard restaurant={restaurant} index={index} key={restaurant.id} />
        )
      })}
    </>
  )
};

I thought that the cache only required a tag in order to create the fingerprint however the API is being called every time the component renders. Is there something else I need to be doing?