Redux-Saga行为模式

Question

Such a saga works perfectly well:

function* getPosition() {
  yield navigator.geolocation.getCurrentPosition(function(pos) {
    console.log(`I am getPosition: ${pos.coords.latitude}, ${pos.coords.longitude}`);
  });
}

But I need that coordinates in Redux state tree. So, I tried a few patterns and none of them works. 1) There is no way to get variable out of getCurrentPosition scope

function* getPosition() {
  let position = {};
  yield navigator.geolocation.getCurrentPosition(function(pos) {
    position = pos;
  });
  // either
  console.log(`I am getPosition: ${position.coords.latitude}, ${position.coords.longitude}`);
  // or
  yield console.log(`I am getPosition: ${position.coords.latitude}, ${position.coords.longitude}`);
  // Any of two is undefined
}

2) There is no way to return and assign value:

function* getPosition() {
  const position = yield navigator.geolocation.getCurrentPosition(function(pos) {
    return pos;
  });
  yield console.log(`I am getPosition: ${position.coords.latitude}, ${position.coords.longitude}`);
}

3) Method put has no effect:

function* getPosition() {
  yield navigator.geolocation.getCurrentPosition(function(pos) {
    // Pos fetched
    console.log(`I am getPosition: ${pos.coords.latitude}, ${pos.coords.longitude}`);
    // Nothing happens. State is empty object.
    put({
      type: LOCATION_SET_POSITION,
      pos
    });
  });
}

locationReducer is inside of rootReducer as the other working reducers are:

locationReducer.js
export function locationReducer(state = {}, action) {
  switch (action.type) {
    case LOCATION_SET_POSITION:
      return action.pos
    default:
      return state;
  }
}

And I do not have an actionCreater. As far as I understand, put method both dispatches an action and sets actionCreator. How to put coordinates to the state tree?

Answer 1

Your problem is that geolocation.getCurrentPosition is asynchronous, but is in the success/error callback style, whereas you need it to be a promise to be fed to redux-saga

function* getPositionSaga() {
    const getCurrentPosition = () => new Promise(
      (resolve, reject) => navigator.geolocation.getCurrentPosition(resolve, reject)
    )
    const pos = yield call(getCurrentPosition)
    yield put({type: LOCATION_SET_POSITION, pos})
}

Here we wrap getCurrentPosition into a function that returns a Promise<Position>

call is a redux-saga effect that if the function it is given returns a promise, it will yield only when that promise is fulfilled, and will return the fulfilled value into your saga for further use.

put is an effect that will end up dispatching the given action object via redux

Any redux-saga effects must be yielded from the generator rather than straight up called, as they return just a simple object of instructions for the redux-saga middleware executor (rather than actually performing the side effect immediately). The executor can only access and control these when yielded from the generator, so using them in callbacks like your example 3 will not work like you expect it to