Usage with Redux

Example

You can just as easily combine it with redux:

import { useEventSource, useEventSourceListener } from "@react-nano/use-event-source";
import { Action, Store } from "redux";
import { useStore } from "@react-nano/redux"; // or: "react-redux";

function MyComponent() {
  const messages = useSelector(getMessages);
  const dispatch = useDispatch();
  const [eventSource, eventSourceStatus] = useEventSource("api/events", true);
  useEventSourceListener(
    eventSource,
    ["update"],
    (evt) => {
      dispatch(addMessages(JSON.parse(evt.data)));
    },
    [dispatch],
  );

  return (
    <div>
      {eventSourceStatus === "open" ? null : <BusyIndicator />}
      {messages.map((msg) => (
        <div>{msg.text}</div>
      ))}
    </div>
  );
}