title: Redux - Removing entities from related state
body: <p>I have a redux state of the following form, which is managed in slices using <code>combineReducers</code>: </p>
  
  <pre><code>interface AppState {
    foos: Foo[];
    bars: Bar[];
    bazs: Baz[];
  }
  </code></pre>
  
  <p>These are related in the following way:
  One <code>Foo</code> has many <code>Bar</code>. One <code>Bar</code> has many <code>Baz</code>. Their structures are as follows:</p>
  
  <pre><code>interface Foo {
    id: string;
    name: string;
  }
  
  interface Bar {
    id: string;
    name: string;
    fooId: string;
  }
  
  interface Baz {
    id: string;
    name: string;
    barId: string;
  }
  </code></pre>
  
  <p>I have the regular thunks/actions setup for each part of the state, i.e <code>DELETE_FOO_REQUEST</code>, <code>DELETE_FOO_FAILURE</code> <code>DELETE_FOO_SUCCESS</code> and other CRUD options for each of the entities.</p>
  
  <p>My delete foo thunk looks like this:</p>
  
  <pre><code>function deleteFoo(fooId) {
    return async (dispatch, getState) =&gt; {
      dispatch(deleteFooRequest());
  
      await api.deleteFoo(fooId);
  
      dispatch(deleteFooSuccess(fooId);
      // omitted error handling for brevity
    }
  }
  </code></pre>
  
  <p>The thing is: <strong>when I delete a <code>Foo</code> on my api/backend it also deletes all related <code>Bar</code>s and <code>Baz</code>s</strong>. Now how do I handle this while using <code>redux-thunk</code> conventions?</p>
  
  <p>Do I create more actions of the form <code>DELETE_BARS_FOR_FOO</code> and dispatch those in the same thunk? Or do I reuse <code>DELETE_BAR_SUCCESS</code> and use it in a loop? </p>
  
  <p><strong>Option A</strong></p>
  
  <pre><code>function deleteFoo(fooId) {
    return async (dispatch, getState) =&gt; {
      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
    }
  }
  </code></pre>
  
  <p><strong>Option B</strong></p>
  
  <pre><code>function deleteFoo(fooId) {
    return async (dispatch, getState) =&gt; {
      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
    }
  }
  </code></pre>
  
  <p>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 <a href="https://react-redux.js.org/api/batch" rel="nofollow noreferrer"><code>batch()</code></a> api so no worries there.</p>
  
  <p>Are these my only two options while using <code>redux-thunk</code> or is there a superior/conventional way of going about this?</p>