Redux Saga EventChannel: TypeError: (0, _reduxSaga.take) 不是函数

Posted 2023-02-16

【中文标题】Redux Saga EventChannel: TypeError: (0, _reduxSaga.take) 不是函数

【英文标题】：Redux Saga EventChannel: TypeError: (0, _reduxSaga.take) is not a function

【发布时间】：2018-09-09 11:23:35

【问题描述】：

我正在尝试使用 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 谢谢！

【参考方案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";