Redux Saga EventChannel: TypeError: (0, _reduxSaga.take) не является функцией - PullRequest
Новая
       21

Redux Saga EventChannel: TypeError: (0, _reduxSaga.take) не является функцией

0 голосов
/ 09 сентября 2018

Я пытаюсь получить живые данные из стороннего API, используя websocket, используя redux saga eventChannel, но по какой-то причине я получаю ошибку, подобную этой:

enter image description here

//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 Спасибо!

1 Ответ

0 голосов
/ 09 сентября 2018

Вам необходимо импортировать take и takeEvery из redux-saga/effects. Это приведет к следующему: 

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

...

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