title: How to detach firestore listener in Redux Action
body: <p>I am using Redux+Firestore to grab data and populate my store. I'm using <code>.onSnapshot</code> to listen to data in a given collection. What I'm not able to do is detach the listener once I am finished. </p>
  
  <p>I've read the Firestore docs and understand that in order to detach the listener you need to store the callback (<code>.onSnapshot</code>) as a variable, and then call that variable to detach. </p>
  
  <p>The issue I'm facing with this is that I'm using Redux (and attaching/detaching in <code>componentDidMount/componentWillUnmount</code> respectively).</p>
  
  <p>I've seen a pattern used <a href="https://stackoverflow.com/questions/55682344/problem-detaching-listener-from-firestore-nested-sub-collection?rq=1">see here</a> (albeit in Vue) where the callback is stored in a local data variable, so I tried dispatching the callback itself to the Redux store but it doesn't receive it.  </p>
  
  <p>Code below: </p>
  
  <p>NOTE: I've tried adding true/false bool's as parameters in <code>getRoomActivity</code> to call <code>unlisten()</code> based on the link shared above, at this point - I'm at a loss.</p>
  
  <pre><code>// group.js (redux action file)
  export const getRoomActivity = (roomId) =&gt; (dispatch) =&gt; {
    const unlisten = roomCollection
      .where('room', '==', roomId)
      .onSnapshot((querySnapshot) =&gt; {
      const roomItems = [];
      querySnapshot.forEach((doc) =&gt; {
          roomItems.push(doc.data());
      });
    dispatch({ type: GET_ROOM_ACTIVITY, payload: roomItems });
    });
  };
  
  //Room.js (component)
  componentDidMount() {
      this.props.getRoomActivity(this.props.roomId);
    }
  
    componentWillUnmount() {
      this.props.getRoomActivity(this.props.roomId);
    }
  </code></pre>