take() and useSelector()

index.js

import { applyMiddleware, createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import { delay, take } from "redux-saga/effects";
import { useDispatch, useSelector, Provider } from "react-redux";
import createSagaMiddleware from "redux-saga";
import React, { useEffect } from "react";
import ReactDOM from "react-dom";

const sagaMiddleware = createSagaMiddleware();
const composeEnhancers = composeWithDevTools({});
const middleware = [sagaMiddleware];
const enhancers = composeEnhancers(applyMiddleware(...middleware));
const store = createStore(() => {}, enhancers);

function* rootSaga() {
  yield delay(1);
  while (true) {
    const { type } = yield take();
    console.log("type", type);
  }
}

sagaMiddleware.run(rootSaga);

const App = () => {
  useSelector(state => [], () => false); // Change the final value to true and the two actions will be received by the take() in the saga.
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch({
      type: "FIRST_ACTION"
    });
    dispatch({
      type: "SECOND_ACTION"
    });
  }, [dispatch]);

  return <div>App</div>;
};

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);