import { ajax } from 'rxjs/ajax'
import { createEpicMiddleware } from 'redux-observable'
const epicMiddleware = store => {
const originalEpicMiddleware = (
createEpicMiddleware({
dependencies: {
ajax,
dispatch: store.dispatch,
},
})
)
const storeMiddleware = originalEpicMiddleware(store)
epicMiddleware.run = originalEpicMiddleware.run
return storeMiddleware
}
export default epicMiddlewarehttps://codesandbox.io/s/redux-observable-middleware-with-dispatch-0s09v?from-embed
OK, many thanks @Sawtaytoes I managed to get it compiling. It was the suspected type declarations issue. When using Typescript, the action types declared in the epic signature must be a subset of all action types that were declared when the middleware was setup.
I had not instantiated an instance of new generic action and I had also not added it as a type to the RootAction(union of all action types). The RootAction still also contained some old action types from older architecture before refactoring.
The code compiled after doing this and refactoring my epic signature to:
- Specify the subset of action types accepted as input to the epic
- Specify the subset of action types output by the epic
/**
- @param {character[][]} grid
@return {number}
*/
function numOffices(grid) {
let result = 0;
//Put your code here.
let tup=function(grid, x,y, visited){if (x>0 || x > grid.length-1 || y < 0|| y > grid[x].length-1){ return; } if (visited[x][y]=== true){ visited[x][y]=true; } if (grid[x][y]==='0'){
tup(grid, x-1, y, visited);
tup(grid, x+1, y, visited);
tup(grid, x, y-1, visited);
tup(grid, x, y+1, visited);
}
};
let visited =[];
for(let i=0; i<grid.length; i++){
visited[i]=[];
}
for( let x=0; x<grid.lenght; i++){
for (let y=0; y<grid[x].length;y++){
if(!visited[x][y]&& grid[x][y]==='1'){
result++;
tup(grid,x,y, visited);
}
visited[x][y] = true;
}
}
return result;};
let height = parseInt(readline());
let width = parseInt(readline());
let grid = [];
for (var i = 0; i < height; i++) {
grid[i] = (readline() || "").split("");
}
print(numOffices(grid));
const taskNextInQueue$ = (action$, state$) =>
action$.pipe(
ofType(TASK_SEND),
mergeMap(action => {
return action$.ofType(TASK_COMPLETE).pipe(
filter(action2 => action2.deviceId == action.deviceId),
switchMap(action => {@jimjiminyjimjam_twitter This is a great problem to solve, and you have the right idea. You need some sort of namespace or idprop to dictate which observable is the correct TASK_COMPLETE listener.
A few things:
- You want to ensure you have a
takeUntilin your inner observable so you don't have a memory leak with a bunch ofTASK_COMPLETElisteners going. - Make sure your
action2.deviceIdreally is equal to youraction.deviceId. In these situations, I've forgotten to add that prop or pass it into my action creator. Use atap(console.log)or add a breakpoint on thatfilterline. .ofTypeisn't part of Redux-Observable v1 anymore right? Dunno if that's a typo in your example code or if that's your real code, but also make sure you''re piping inofTypelike you do inTASK_SEND.
@jimjiminyjimjam_twitter By namespace, I just mean an id prop like how we have type, I would create a namespace prop on the action object.
I think I'm misunderstanding your issue. How does the architecture look? I assumed on this machine, TASK_SEND gets called and then a listener for TASK_COMPLETE is created for that same deviceId. That's what the code says at least. Whichever device has been sent a message has to respond to this machine with its deviceId and then TASK_COMPLETE is called. After that, another TASK_SEND action gets dispatched.
@jimjiminyjimjam_twitter The issue here is that you're creating more listeners every time a task comes in and never getting rid of them. So basically, when a task is listed as "complete" for that device ID, then you should kill off that inner TASK_COMPLETE observable and stop listening to action$ on it.
Actually, with what you have, a simple take(1) would suffice. Normally I use takeUntil because I kill a listener on complete, but in your case, you're wanting to execute something else on complete so it's a bit different. Using take(1) will say, if a single TASK_COMPLETE comes in after the filter, then it's safe to end this observable when it's done processing.
@jimjiminyjimjam_twitter
const taskNextInQueue$ = (action$, state$) =>
action$.pipe(
ofType(TASK_SEND),
mergeMap(action => {
return action$.ofType(TASK_COMPLETE).pipe(
filter(action2 => action2.deviceId == action.deviceId),
take(1), // PUT IT HERE
switchMap(action => {Based on your code, I'm assuming you're going to execute more tasks with switchMap. You might consider instead using map and pushing through another TASK_SEND action. Once you add that switchMap, the take(1) might not work like you think. Add a finalize operator to log a string when the inner TASK_COMPLETE observable completes to see if that's working properly.
Would "this link in warning" shows 404 in this channel be fine?
Hi, I encounter an issue with Epic.ts file which limits the Generic use of Output Action to extends Input. why is that?
My Output action doesn't need to extend the Input action and it quite limits the development.
https://github.com/redux-observable/redux-observable/blob/master/src/epic.ts
When I change the generic Output to extends Action it gives me more flexability.
const goToItemEpic = (action$, state$): Observable<any> => action$.pipe(
ofType(ItemsDetailsActions.goToItem),
concatMap((action: {payload: {projectId: string; datastoreId: string; itemId: string}}) => {
const projectId = ProjectSelectors.getCurrentProjectId(state$.value);
if(action.payload.projectId !== projectId) {
return of(ProjectActions.setCurrentProjectId({projectId: action.payload.projectId})).pipe(
delay(1000),
switchMap(() => {
return [
DatastoreActions.setCurrentDatastoreId({datastoreId: action.payload.datastoreId}),
ItemsActions.setCurrentItemId({ itemId: action.payload.itemId })
];
})
)
} else {
return [
DatastoreActions.setCurrentDatastoreId({datastoreId: action.payload.datastoreId}),
ItemsActions.setCurrentItemId({ itemId: action.payload.itemId })
];
}
})
);if(action.payload.projectId !== projectId) I would like to set the current project, and then after a delay (that I wish it to be another observable) I also dispatch 2 actions. But i can't manage to do it, maybe you can help @Sawtaytoes
setCurrentProjectId dispatch a series of action, the last beeing getDatastoresSuccess. I would like that after getDatastoresSuccess is executed, setCurrentDatastoreId, setCurrentItemId are dispatched
return merge(
of(ProjectActions.setCurrentProjectId({projectId: action.payload.projectId})),
of(
DatastoreActions.setCurrentDatastoreId({datastoreId: action.payload.datastoreId}),
ItemsActions.setCurrentItemId({ itemId: action.payload.itemId })
).pipe(
delay(1000)
)
)startWith but that might not read clearly in this case
return of(
DatastoreActions.setCurrentDatastoreId({datastoreId: action.payload.datastoreId}),
ItemsActions.setCurrentItemId({ itemId: action.payload.itemId })
).pipe(
delay(1000),
startWith(ProjectActions.setCurrentProjectId({projectId: action.payload.projectId}))
)
@kmui2 I was going to edit the other StackOverflow answer, but didn't understand what the answerer was going for so I wrote my own response instead.
I wrote an article here about splitting observable pipelines to allow multiple actions to "fall through" and get automatically dispatched here: https://itnext.io/redux-observable-can-solve-your-state-problems-15b23a9649d7
What you're talking about is pretty standard for when I use Redux-Observable, but the confusion you had where pauseGame wasn't firing makes complete sense. In that case, I wrote a separate article about using dispatch anywhere in your pipeline instead of having the actions "fall through" and become automatically dispatched: https://dev.to/sawtaytoes/the-best-practice-anti-pattern-jj6