Redux - Removing entities from related state - reactjs

Question

I have a redux state of the following form, which is managed in slices using combineReducers:
interface AppState {
foos: Foo[];
bars: Bar[];
bazs: Baz[];
}
These are related in the following way:
One Foo has many Bar. One Bar has many Baz. Their structures are as follows:
interface Foo {
id: string;
name: string;
}
interface Bar {
id: string;
name: string;
fooId: string;
}
interface Baz {
id: string;
name: string;
barId: string;
}
I have the regular thunks/actions setup for each part of the state, i.e DELETE_FOO_REQUEST, DELETE_FOO_FAILURE DELETE_FOO_SUCCESS and other CRUD options for each of the entities.
My delete foo thunk looks like this:
function deleteFoo(fooId) {
return async (dispatch, getState) => {
dispatch(deleteFooRequest());
await api.deleteFoo(fooId);
dispatch(deleteFooSuccess(fooId);
// omitted error handling for brevity
}
}
The thing is: when I delete a Foo on my api/backend it also deletes all related Bars and Bazs. Now how do I handle this while using redux-thunk conventions?
Do I create more actions of the form DELETE_BARS_FOR_FOO and dispatch those in the same thunk? Or do I reuse DELETE_BAR_SUCCESS and use it in a loop?
Option A
function deleteFoo(fooId) {
return async (dispatch, getState) => {
dispatch(deleteFooRequest());
await api.deleteFoo(fooId);
const barIds: string[] = selectBarsForFoo(fooId);
dispatch(deleteFooSuccess(fooId);
dispatch(deleteBarsForFoo(fooId);
for (const barId of barIds) {
dispatch(deleteBazForBar(barId));
}
// omitted error handling for brevity
}
}
Option B
function deleteFoo(fooId) {
return async (dispatch, getState) => {
dispatch(deleteFooRequest());
await api.deleteFoo(fooId);
const barIds: string[] = selectBarsForFoo(fooId);
dispatch(deleteFooSuccess(fooId);
for (const barId of barIds) {
dispatch(deleteBarSuccess(barId));
}
// followed by a similar loop for the bazs of each bar
// omitted error handling for brevity
}
}
In option B case I am reusing an action meant for something else technically. In both actions I'm dispatching in a loop which would impact performance as well. I am using react-redux however and can use the batch() api so no worries there.
Are these my only two options while using redux-thunk or is there a superior/conventional way of going about this?

Answer 1

Instead of complicating your actions is it an option to just deal with this in your reducer (as suggested in comments). The following way you can still use combineReducers but have a combined reducer that gets {foo,bar,bas} as state:
const fooBarBaz = combineReducers({
foo:fooReducer,
bar: barReducer,
baz:bazReducer,
});
const combined = (state,action)=>{
//handle foo remove success action, state is {foo,bar,baz}
}
export default function reducer(state,action){
return combined(fooBarBaz(state,action),action)
}