我正在尝试使用redux saga eventChannel使用websocket从第三方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
谢谢!
最佳答案
您需要从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";
关于javascript - Redux Saga EventChannel:TypeError:(0,_reduxSaga.take)不是函数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52244012/