Writing a HoC that shares data with redux/redux-saga

I'm currently trying to create a reusable component, that will pull data from a remote source, and update the table as needed if items change on the backend. Here's a simple component:

<React.Fragment>
    <Header />
    <table>
      <thead>
        <tr>
          {columns.map(c => (
            <th key={c.header}>{c.header}</th>
          ))}
        </tr>
      </thead>
      <tbody>{data.map(row => children(row))}</tbody>
    </table>
  <Pagination />
</React.Fragment>

The goal was, that from my order page, I could call it like below:

<DataTable
  id="app/OrderPage/orders"
  url="http://localhost:8081/api/orders"
  columns={[
    { header: 'Name' },
    { header: 'Actions' },
  ]}
>
  {order => (
      <tr key={order.id}>
        <td>{order.name}</td>
        <td>
          <Link to={`/admin/orders/${order.id}`}>
            View
          </Link>
        </td>
      </tr>
    )}
</DataTable>

Now, the idea is I want to reuse this component in multiple places. I currently use redux-saga to do the fetching, and update the datatable when the data is returned. (Currently I'm providing an datatable ID, which is then being passed to FETCH_DATA, LIMIT_CHANGED, SEARCH_CHANGED, etc..., which I then use to update the parts of the slice that need changing:

function dataTableReducer(state = initialState, action) {
  switch (action.type) {
    case INIT: {
      const { id, url, deletedItem } = action;
      return state.setIn(
        ['tables', id],
        initialTableState
          .set('id', id)
          .set('url', url)
          .set('deletedItem', deletedItem),
      );
    }
    case LOAD_DATA_SUCCESS:
      return state.setIn(['tables', action.id, 'data'], action.data.data);
    case LIMIT_CHANGED:
      return state.setIn(['tables', action.id, 'limit'], action.limit);
    case SEARCH_CHANGED:
      return state.setIn(['tables', action.id, 'search'], action.search);
    default:
      return state;
  }
}

My current saga for the DataTable component:

function* getData({ id }) {
  const dt = yield select(selectDataTableInstance(), { id });
  const { url, limit, search, page } = dt;

  const res = yield call(request, url, {
    qs: {
      limit,
      search,
      page,
    },
  });

  yield put(loadDataSuccess(id, res));
}

// Individual exports for testing
export default function* dataTableSaga() {
  yield all([
    takeEvery(LOAD_DATA, getData),
    takeEvery(LIMIT_CHANGED, getData),
    takeLatest(SEARCH_CHANGED, getData),
  ]);
}

The problem now becomes, how do I add additional logic to this component? For example, when a new order comes in over a websocket, I'd like the <DataTable /> component to add that row to the top of the list. The problem is, I'd need to connect additional logic to the redux-saga that I have in place. My thought initially was to add a prop to the DataTable, like deletedItem={DELETE_ORDER_SUCCESS}, but this seems like a really nasty workaround. My reducer would need to loop through every rendered table in the slice, and check if the action.type === the one that was initialized when the table displayed.

I'm currently using React Boilerplate.

TLDR:

• Have a reusable DataTable component
• Needs to fetch data/populate table. Has search/limit/pagination functionality
• Want to add additional hooks (Like addItem), that will add the item to the top of the list, if one comes from a websocket

from Writing a HoC that shares data with redux/redux-saga