react-native - redux-saga: react 回调返回的事件 channel 和监听器

Question

在 native react 中 backhandler监听器对回调函数使用react并采取适当的行动。

我需要读取我的商店并根据它返回 true 或 false。但是我不能在正常功能中使用选择效果，我不能影响来自“watchBackButton”功能的监听器回调功能。

export function* backButtonListen() {
  return eventChannel(emitter => {
    const backHandlerListener = BackHandler.addEventListener(
      "hardwareBackPress",
      () => {
        emitter("back pressed");
      }
    );
    return () => {
      backHandlerListener.remove();
    };
  });
}

export function* watchBackButton() {
  const chan = yield call(backButtonListen);
  try {
    while (true) {
      let back = yield take(chan);
    }
}

Answer 1

由于事件 channel 不是双向的，我认为没有办法使用 select 效果将一些当前状态从 saga 获取到事件 channel 。

但是，可以直接访问商店。有多种方法可以将商店实例获取到事件 channel 。请参阅我的其他答案 here。

使用例如上下文方法你可以这样做:

// redux.js
...
const store = createStore(...);
sagaMiddleware.runSaga(rootSaga, {store});

// root-saga.js
export default function * rootSaga(context) {
  yield setContext(context);
  yield fork(watchBackButton);
}

// watch-back-button.js
export function* backButtonListen() {
  const store = yield getContext('store');
  return eventChannel(emitter => {
    const backHandlerListener = BackHandler.addEventListener(
      "hardwareBackPress",
      () => {
        emitter("back pressed");
        return store.getState().foo === 'bar';
      }
    );
    return () => {
      backHandlerListener.remove();
    };
  });
}

export function* watchBackButton() {
  const chan = yield call(backButtonListen);
  try {
    while (true) {
      let back = yield take(chan);
    }
}