a promise bridge between react component and redux-saga.

useSagaRequest.jsx

// react.js
const SagaRequestDemo = () => {
    const sagaRequest = useSagaRequest();

    const loadUser = () => {
        sagaRequest.dispatch(fetchUser({ id: 'mutoo' }))
            .then((data) => {
                console.log(`fetch user success: ${data}`);
            })
            .catch((err) => {
                console.error(`fetch user failed: ${err}`);
            });
    };

    const reset = () => { sagaRequest.reset() };

    const { data, loading, err } = sagaRequest.status;
    if (loading) return `fetching user`;
    if (err) return <>
        <pre>{`fetch user error: ${err}`}</pre>
        <button onClick={reset}>reset</button>
    </>;

    return <>
        <pre>{data}</pre>
        <button onClick={loadUser}>load</button>
    </>;
}

// saga.js
function* watch() {
    yield takeEverySagaRequest(FETCH_USER, doFetchUser);
}

function* doFetchUser(action) {
	const { id } = action.payload;
	const { data } = yield fetch(`/users/${id}`);
	yield put(storeUser({ user: data }));
	return data; // for dispatched resolver
}

the serializableCheck will prevent redux dispatch a promise callback functions.
to solve this, we need to create a hash map registry to keep the promise.