Passing observer into redux-sagas - reactjs

Question

I'm trying to leverage a firebase observable from within the redux-sagas framework but I'm having trouble doing this without a hack. I'm trying to use firebase's "onAuthStateChange" function as shown here
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
} else {
// No user is signed in.
}
});
essentially the observer executes whenever a user signs in or out
In my firebase utility file my method looks like this:
authChanged: () =>{
return firebaseAuth.onAuthStateChanged(callback);
}
then in my saga, for the moment, I'm simply trying to log to the console whenever the observer observes something:
export function* loginState(){
Firebaseutils.authChanged(function(user){
if(user){
console.log('User logged in!')
}else{
console.log('User logged out')
}
});
}
This fails due to 'callback' not being defined. I'm essentially trying to curry the observer to pass to sagas but it's not working. My workaround is to pass the full firebase auth object to my login/logout saga and then create the observer in there. That works but seems like a hack. Any help would be hugely appreciated.

Answer 1

I don't think you're actually integrating the observer into the saga in your snippet. It'll work for console.log b/c that's a sync function, but you can't yield anything from that callback, as its context is separate from that of the generator. this deprives you of lots of the sagas utility, if it works # all.
I had to get this working on my project, and the best I could do was inspired by this project and the architecture in this starter-kit.
Basically,it's a few steps.
Wrap your observer in function that takes dispatch and returns a promise.
export function initAuth(dispatch) {
return new Promise((resolve, reject) => {
myFirebaseAuthObj.onAuthStateChanged(
authUser => {
if (authUser) {
dispatch(signInFulfilled(authUser))
} else if (authUser === null) {
dispatch(signOutFulfilled())
}
resolve()
},
error => reject(error)
)
})
}
Wrap your top-level container in a function
const initialState = window.___INITIAL_STATE__
const store = createStore(initialState)
let render = () => {
const routes = require('./routes/index').default(store)
ReactDOM.render(
<AppContainer store={store} routes={routes} />,
MOUNT_NODE
)
}
wrap render() in initAuth:
initAuth(store.dispatch)
.then(() => render())
.catch(error => console.error(error))
use your sagas for anything else. for example, you can conduct route-changes from your sagas like so:
function* signIn(authProvider) {
try {
const authData = yield call([firebaseAuth, firebaseAuth.signInWithPopup], authProvider)
yield take(SIGN_IN_FULFILLED)
browserHistory.push('/dash')
}
catch (error) {
yield put(signInFailed(error))
}
}

Answer 2

It seems like you meant to have callback as a parameter to authChanged but authChanged currently takes no parameters. Here's what you probably meant to do:
authChanged: (callback) => {
return firebaseAuth.onAuthStateChanged(callback);
}
I'm not sure I understand what you mean by currying the observer but you could also do something like this to curry the firebase method to use as your method:
{
authChanged: ::firebaseAuth.onAuthStateChanged,
}