How to use yield call() from an external API callback?

Hello!

I’m using an external API (Firebase), which uses callbacks. I’m not 100% sure what’s the best approach to converting the callbacks to something usable by redux-saga because of its use of generators.

Code:

    const database = firebase.database();
    const connectionRef = database.ref('.info/connected');
    connectionRef.on('value', (snapshot) => {
      if (snapshot.val() === true) {
        yield call(actions.connected);
      }
    });

Action:

    export const connected = () => {
      return {
        type: types.FIREBASE_CONNECT,
      };
    };

Reducer:

    const connectionStatus = (state: boolean = initialState, action: Object) => {
      switch (action.type) {
      case types.FIREBASE_CONNECT:
        return true;
      default:
        return state;
      }
    };

I can’t use yield because the callback isn’t a * generator function.

What’s the correct approach to converting it in a manner that’s good for redux-saga to handle?

BTW, I’ve really been enjoying redux-saga- it’s been fantastic to use, thanks!

[aikoven]

You can wrap your code to a function that returns promise, something like

function connect() {
  return new Promise(resolve => {
    const database = firebase.database();
    const connectionRef = database.ref('.info/connected');
    connectionRef.on('value', resolve);
  });
}

Then use it in saga:

const snapshot = yield call(connect);
if (snapshot.val() === true)
  yield put(actions.connected());

[Andarist]

@aikoven this Promise will resolve just once, if he wants to get multiple values over time from the firebase callback it is not a suitable solution unfortunately

what i came up with in my project is that - https://github.com/yelouafi/redux-saga/issues/475#issuecomment-239129811