Redux Saga EventChannel: TypeError: (0, _reduxSaga.take) is not a function

Question

我正在尝试使用 websocket 使用 redux saga eventChannel 从第三方 api 获取实时数据，但由于某种原因我收到这样的错误：

//sagas/index.js
import { takeLatest } from "redux-saga";
import { all, fork } from "redux-saga/lib/effects";

import { watchHistoricalPricesSaga } from "./HistoricalPricesSaga";
import { watchLivePricesSaga } from "./LivePricesSaga";

export default function* watcherSaga() {
  yield all([fork(watchHistoricalPricesSaga), fork(watchLivePricesSaga)]);
}

//sagas/LivePricesSaga
import { eventChannel, takeEvery, take } from "redux-saga";
import { call, put } from "redux-saga/lib/effects";

function initWebsocket() {
  return eventChannel(emitter => {
    //Subscription Data
    const subscribe = {
      type: "subscribe",
      channels: [
        {
          name: "ticker",
          product_ids: ["BTC-USD"]
        }
      ]
    };

    //Subscribe to websocket
    let ws = new WebSocket("wss://ws-feed.pro.coinbase.com");

    ws.onopen = () => {
      console.log("Opening Websocket");
      ws.send(JSON.stringify(subscribe));
    };

    ws.onerror = error => {
      console.log("ERROR: ", error);
      console.dir(error);
    };

    ws.onmessage = e => {
      let value = null;
      try {
        value = JSON.parse(e.data);
      } catch (e) {
        console.error(`Error Parsing Data: ${e.data}`);
      }
      if (value && value.type === "ticker") {
        console.log("Live Price: ", value);
        return emitter({
          type: "POST_LIVE_PRICE_DATA",
          data: value.price
        });
      }
    };

    return () => {
      ws.close();
    };
  });
}

function* wsSaga() {
  const channel = yield call(initWebsocket);
  while (true) {
    const action = yield take(channel);
    yield put(action);
  }
}

export function* watchLivePricesSaga() {
  yield takeEvery("START_LIVE_PRICE_APP", wsSaga);
}

//sagas/HistoricalPricesSaga.js
import { takeEvery } from "redux-saga";
import { call, put } from "redux-saga/lib/effects";

import Api from "../api";

function* getHistoricalPrices() {
  console.log("getHistricalPrices");
  try {
    const response = yield call(Api.callHistoricalPricesApi);

    yield put({
      type: "HISTORICAL_PRICES_CALL_SUCCESS",
      historicalPrices: response.data
    });
  } catch (error) {
    yield put({ type: "HISTORICAL_PRICES_CALL_FAILED" });
  }
}

export function* watchHistoricalPricesSaga() {
  yield takeEvery("GET_HISTORICAL_PRICES", getHistoricalPrices);
}

我试图通过将两个文件分开放置来隔离问题，并且 HistoricalPricesSaga 运行良好。所以，问题似乎出在 livePricesSaga 上。此外，正如我可以使用 redux-logger 在控制台中看到的那样，正在分派该操作。

您也可以在这里查看完整代码：CodeSandbox 谢谢！

Answer 1

您需要从 redux-saga/effects 导入 take 和 takeEvery。这将导致以下结果：

//sagas/index.js
import { all, fork, takeLatest } from "redux-saga/effects";

...

//sagas/LivePricesSaga
import { call, put, takeEvery, take } from "redux-saga/effects";

Redux Saga EventChannel: TypeError: (0, _reduxSaga.take) is not a function

Redux Saga EventChannel: TypeError: (0, _reduxSaga.take) is not a function

javascript

websocket

reactjs

redux

redux-saga