title: Custom hook to get data from store, if no then dispatch action and return data
body: <p>I'm trying out React hooks API. To be specific, trying out a custom hook. The scenario is that I have an API for <strong>contact-types</strong> which is being used in multiple components. In all those components I have to check if the <strong>contact-types</strong> exists in the store. And if not, then dispatch an action. To avoid checks, and I wrote a hook that does the same. It checks the store if data is present, if yes, then returns it. If not, then dispatches an action to fetch it and when it's updated in the store, returns that value.</p>
  
  <p>Here's the hook-
  </p>
  
  <pre><code>export const useContactTypes = () =&gt; {
      const contactTypesFromStore = store.getState().contacts.types;
  
      const [contactTypes, setContactTypes] = useState(contactTypesFromStore);
  
      useEffect(() =&gt; {
          if (!contactTypesFromStore) { //contact not in store
              store.dispatch({ type: 'FETCH_CONTACT_TYPES' }); //dispatch action to fetch contact types
          }
      }, []);
  
      store.subscribe(() =&gt; {
          const newValues = store.getState().contacts.types;
          if (contactTypesFromStore !== newValues) {
              setContactTypes(newValues);
          }
      });
  
      return contactTypes;
  };
  </code></pre>
  
  <p>The requirements are met. But-</p>
  
  <ol>
  <li>Is there any other approach for this?</li>
  <li>Is this the best way to write a custom hook?</li>
  <li>And should I worry about using redux subscribe like this?</li>
  </ol>