编写一个与redux / redux-saga共享数据的HoC

Question

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

Answer 1

You can have a set of reducers for web sockets related action. Let's say when a new order is received on web sockets, you can dispatch an NEW_ORDER action.

In your reducers, you can update the existing state to include the new order (at the top of the list if that is what you need). This should trigger a re render since the table data is being read from the Redux store.

case LOAD_DATA_SUCCESS:
  return state.setIn(['tables', action.id, 'data'], [action.data.data, state.getIn(['tables', 'action.id', 'data']);

You can have different actions for different things you need to perform.

Answer 2

I would setup the websocket inside your saga after yield put(loadDataSuccess(id, res)); and add a handler like this:

var ws = new WebSocket(wsAddress);
ws.onmessage = function (event) {
 const newItem = event.data;
 res = {...res, data:[newItem ,...res.data]};
 yield put(loadDataSuccess(id, res));
}

and you would need to change your const res to let res

then on the component unmount you should send an action to allow closing the websocket. (you could keep a map of open websockets keyed by the id)