CODEWITHSUNDEEP
javascriptreactjswebsocketreduxredux-saga
Anas Shad
Anas Shad

Reputation: 179

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

I am trying fetching live data from a third party api using websocket using redux saga eventChannel but for some reason I am getting an error like this:

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

I have tried to isolate the issue by putting the two files separately and the HistoricalPricesSaga runs fine. So, the issue seems to be with the livePricesSaga. Also, the action is being dispatched as I can see it in the console using redux-logger.

You can also have a look at the complete code here: CodeSandbox Thanks!

Upvotes: 0

Views: 1424

Answers (1)

vahissan
vahissan

Reputation: 2332

You need to import take and takeEvery from redux-saga/effects. This would result in below:

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

...

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

Upvotes: 1

Related Questions