redux-saga - 启用 addEventListener 回调来执行 put

Question

我需要做一个全局addEventListener喜欢的东西。我正在使用 native react ，需要监听深层链接重定向事件。我想不出 redux-saga 的方法来做到这一点。我需要启用 put来自 addEventListener 中的回调。

我目前在导入 store然后做 store.dispatch(...)如此处所示:

import store from './flow-control'

Linking.addEventListener('url', ({ url }) => store.dispatch(_redir(url)));

有没有一种 redux-saga 方法可以做到这一点？

我希望把它变成一个传奇:

function* reduxSaga() {

    const url = yield Linking.addEventListener('url', ({ url }) => ???);

}

或者至少将 store.dispatch 替换为 put ，如下所示:

import { put } from 'redux-saga/effects'

Linking.addEventListener('url', ({ url }) => put(_redir(url)));

用 redux-saga 做这件事的正确方法是什么？

Answer 1

一种可能的解决方案是使用 channel 。这是一个应该适用于您的情况的示例:

import { channel } from 'redux-saga'
import { put, take, race } from 'redux-saga/effects'

const redirectChannel = channel()

export function* startRedirectChannel(id) {
  Linking.addEventListener('url', ({ url }) => redirectChannel.put({
    type: REDIRECT,
    url,
  }))
}

export function* watchRedirectChannel() {
  while (true) {
    const action = yield take(redirectChannel)
    yield put(action)
  }
}

这里的想法是，我们将为从 Linking.addEventListener 发出的每个 url 事件在 channel 上推送一个 REDIRECT 操作。

我们还必须启动另一个 saga 函数，该函数在 while 循环 (watchRedirectChannel) 中监听每个推送的操作。每次从 channel 中执行一个 Action 时，我们使用正常的 yield put 来告诉 redux-saga 这个 Action 应该被调度。

这里是使用 eventChannel 的示例接口(interface):

import { eventChannel } from 'redux-saga'
import { put, take } from 'redux-saga/effects'

export function* watchRedirect() {
  const redirectChannel = eventChannel(emitter => {
    Linking.addEventListener('url', emitter)

    // The subscriber must return an unsubscribe function
    return () => {
      Linking.removeEventListener('url', emitter)
    }
  })

  while (true) {
    const { redirectEvent, cancelEvent } = race({
      redirectEvent: take(redirectChannel),
      cancelEvent: take(ACTION_Y),
    })

    if (redirectEvent) {
      yield put({
        type: REDIRECT,
        url,
      })
    } else {
      redirectChannel.close()
      return
    }
  }
}