neurosnap on main
Update effects.d.ts code docs t… (compare)
dependabot[bot] on npm_and_yarn
dependabot[bot] on npm_and_yarn
Bump http-cache-semantics from … (compare)
const someresult = yield call(someTypedFunction)
to work, but that's blocked on typescript adding more support, right?
I guys, I'm struggling in finding a proper way to use saga in my app. For example I have a fetch action and a notification function to push notification when the fetch action failed or succeeded.
The question is where should I put UI-related logic like notification, confirmation modals, router redirection...? Should I put it right in the saga?
That doesn't seem to be a good choice for me because I want the app logic to be separated from UI logic. That way I can later use my app logic for mobile and other devices and the only thing I need is to rebuild the UI itself. Can someone tell me what is the best practice for saga? Thank you!
ERROR in ./node_modules/redux-saga/effects.d.ts
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Debug Failure. Output generation failed
at PoolWorker.fromErrorObj (/home/dimitri/src/github.com/weaveworks/wkp-ui/app/ui/node_modules/thread-loader/dist/WorkerPool.js:262:12)
at Object.transpileModule (/home/dimitri/src/github.com/weaveworks/wkp-ui/app/ui/node_modules/typescript/lib/typescript.js:116825:29)
at getTranspilationEmit (/home/dimitri/src/github.com/weaveworks/wkp-ui/app/ui/node_modules/ts-loader/dist/index.js:283:74)
at successLoader (/home/dimitri/src/github.com/weaveworks/wkp-ui/app/ui/node_modules/ts-loader/dist/index.js:66:15)
at Object.loader (/home/dimitri/src/github.com/weaveworks/wkp-ui/app/ui/node_modules/ts-loader/dist/index.js:22:12)
@ ./src/store/index.ts 122:16-45
@ ./src/store/configureStore.ts
@ ./src/index.tsx
@ multi ./src/index.tsx webpack-hot-middleware/client?overlay=false
ℹ 「wdm」: Failed to compile.
Hey guys! I'm looking for the best way to manage these sagas
LOGIN_REQUEST -> OPEN_WS_REQUEST
LOGOUT_REQUEST -> CLOSE_WS_REQUEST
Does the rootSaga need to watch for the WS actions or is it better that the LOGIN/LOGOUT workers handle some logic?
query-string
in componentDidMount()
but now I would like to dispatch actions to update state with extracted params and fire an API calls from redux-saga
. What's the recommended way to do so?
batch()
command with Redux saga ( https://react-redux.js.org/api/batch )?
takeEvery
, takeLatest
, etc) process the API method, it assigns a unique Id to each request and tracks it in the store so the component can check the status. This works great for takeEvery
, but when 3 components request the same endpoint simultaneously while using takeLeading
, the subsequent tasks get ignored. This leaves entries in my Redux store that are still designated as isFetching
, and my components think their data is still loading. How can I track (a) which tasks were actually taken, (b) which were ignored, and (c) dispatch an action to tell my component that the request was superseded?
Hey guys.. I'm having response is undefined on my request using sagas
export function* getCompanies({ payload }: any) {
try {
const { data: response } = yield call(api.get, '/companies-list', {
params: {
keyword: payload,
},
});
console.error(response);
const { data } = response;
yield put(handleFetchCompaniesAsync.success(data.companies));
} catch ({ response }) {
yield all([
put(handleFetchCompaniesAsync.failure(response.data)),
put(handleAsyncNotification(response.data)),
]);
}
}
export default function* companySagas() {
yield takeLatest(handleFetchCompaniesAsync.request, getCompanies);
}
What could be the problem here?
eventChannel
s that are never closed. I've read redux-saga/redux-saga#1961 but I don't think helps me figure out how to properly close my channels. The pattern I'm using here is something like this:const channel = eventChannel(…) // Unsubscribe is returned etc.
yield takeEvery(channel, process)
takeEvery
returns a task (and is non-blocking) so I would need some way to say "wait until this saga is cancelled, and then close the channel" but I don't know how to express that.
yield all([takeEvery(…), takeEvery(…), takeEvery(…)])
Hey guys, I have a more of a conceptual problem I've been struggling with in the past couple of days.
I have to subscribe to N event streams and react to the events occurring in them. Those are standard Node-like event-emitters.
I also have a facade API which should merge those N event streams together into a single one.
My initial thought was to convert the subscription into an async generator:
async function* subscribe({ fromBlock = 0, toBlock = 'latest', filter = {} } = {}) {
let res;
let rej;
let promise = new Promise((resolve, reject) => {
res = resolve;
rej = reject;
});
const subscription = linguo.events.allEvents({ fromBlock, toBlock, filter });
subscription
.on('data', event => {
res(event);
promise = new Promise((resolve, reject) => {
res = resolve;
rej = reject;
});
})
.on('error', err => {
rej(err);
promise = new Promise((resolve, reject) => {
res = resolve;
rej = reject;
});
});
while (true) {
try {
const event = await promise;
yield event;
} catch (err) {
console.warn(`Canceling event subscription for contract ${linguo.options.address}`, err);
break;
}
}
subscription.unsubscribe();
}
Then to combine the multiple subscribe()
calls, I've found this merge operator from the repeatable
library.
Then I happily wrote my saga:
export async function* subscribeSaga(action) {
const { fromBlock, toBlock, filter } = action.payload ?? {};
const linguoApi = yield getContext('linguoApi');
const subscription = yield call([linguoApi, 'subscribe'], { fromBlock, toBlock, filter });
for await (const evt of subscription) {
console.log('>>>', evt);
}
}
Only to find out then that redux-saga
does not support async generators :/
Any ideas?