title: Design patterns using react redux and OOP?
body: <p>I have a class named <code>AuthenticationClient</code>. This class has a private property <code>_user</code> with <code>get, set</code> methods and some other methods like <code>signIn, signOut, resetPassword</code>.</p>
  <p>I use this class as a singleton.</p>
  <pre><code>// index.js
  export const authenticationClient = new AuthenticationClient();
  </code></pre>
  <p>I have also created a react hook</p>
  <pre><code>export const useAuthentication: () =&gt; AuthenticationClient = () =&gt; {
    const [ , setUser ] = useState&lt;Maybe&lt;User&gt;&gt;(authenticationClient.user);
  
    useEffect(() =&gt; {
      const unsubscribe = authenticationClient.subscribeUser(setUser);
      return () =&gt; {
        unsubscribe();
      };
    }, [ authenticationClient ]);
  
    return authenticationClient;
  };
  </code></pre>
  <p>and the subscribe / unsubscribe methods follow the observer pattern logic, so every time the <code>_user</code> is getting <code>set</code>, each listener (using the react primitive <code>setUser</code>) gets notified in order for the components to get re-rendered.</p>
  <p>Although this works, I find it a little bit dirty for some reason. I would like to keep the <code>AuthenticationClient</code> class, and somehow bind the <code>_user</code> to the redux store but I cannot find a nice way to do so.</p>
  <p>Is there any pattern that can combine both OOP (AuthenticationClient) with react-redux ?</p>