Question

我需要做一个全球addEventListener之类的事情。我正在使用本机反应，需要侦听深层链接重定向事件。我无法弄清楚redux-saga的做法。我需要在addEventListener中的回调中启用put。

我目前正在执行导入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：

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

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

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

Answer 1

一种可能的解决方案是使用渠道。以下是一个适合您案例的示例：

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事件的通道上推送REDIRECT操作。

我们还必须启动另一个saga函数，该函数在while循环（watchRedirectChannel）中侦听每个推送操作。每次从渠道采取行动时，我们都会使用正常收益率来告诉redux-saga应该调度此行动。

以下是使用eventChannel API的示例：

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
    }
  }
}

启用addEventListener回调以执行put

1 个答案: