useAsyncReducerAtom - async dispatch

[AjaxSolutions]

How can I use async dispatch with useReducerAtom?
This is what I had in mind. I don't know if this code is correct, but it's provided for demo purposes.

const getAsyncDispatch = (dispatch) => async (action) => {
    try {
        if (typeof action === "function") {
            return await Promise.resolve(action(dispatch));
        }
        dispatch(action);
    } catch (e) {
        console.error("error dispatching action", e);
    }
};

const useAsyncReducerAtom = (atom, reducer, scope) => {
    const [state, dispatch] = useReducerAtom(atom, reducer, scope);
    const asyncDispatch = useMemo(() => getAsyncDispatch(dispatch), []);
    return [state, asyncDispatch];
};

[dai-shi]

Looks good. You want to try atomWithAsyncReducer instead.
We don't have a plan to add it in jotai/utils, but advanced-recipes docs is an option.
Alternatively, you can develop a third-party library.

[sagar7993]

I was able to make this work using TypeScript. Just posting my code here because it might help someone else looking for something similar. I'm sure there must be better ways of doing this, but the following code did the job for me -

function getAsyncDispatch<Value, Action>(dispatch: (action?: Action) => void) {
	return async (action: Action) => {
		if (typeof action === 'function') {
			return Promise.resolve<Value>(action(dispatch));
		}
		return dispatch(action) as unknown as Promise<Value>;
	};
}

function useAsyncReducerAtom<Value, Action>(atom: PrimitiveAtom<Value>, reducer: (prev: Value, action?: Action) => Promise<Value>) {
	const [state, dispatch] = useReducerAtom<Value, Action>(atom, reducer as unknown as (prev: Value, action?: Action) => Value);
	const asyncDispatch = useMemo(() => getAsyncDispatch<Value, Action>(dispatch), [dispatch]);
	return { state, dispatch: asyncDispatch };
};

Now in your react component use it something like this -

const { state, dispatch } = useAsyncReducerAtom<User | null, AuthReducerAction>(userAtom, authReducer);

For additional context, my reducer looks like this -

import { atom } from 'jotai';
import { User } from 'firebase/auth';
import { signIn, signUp, signOut, getCurrentUser } from '../Services/authService';

export enum AuthActionTypes {
	SIGN_IN = 'SIGN_IN',
	SIGN_UP = 'SIGN_UP',
	SIGN_OUT = 'SIGN_OUT',
}

export interface SignInAction {
	type: AuthActionTypes.SIGN_IN;
	payload: { email: string; password: string };
}

export interface SignUpAction {
	type: AuthActionTypes.SIGN_UP;
	payload: { email: string; password: string };
}

export interface SignOutAction {
	type: AuthActionTypes.SIGN_OUT;
}

export type AuthReducerAction = SignInAction | SignUpAction | SignOutAction;

export const userAtom = atom(getCurrentUser());

export const authReducer = async (prev: User | null, action?: AuthReducerAction) => {
	
	switch (action?.type) {
		case AuthActionTypes.SIGN_IN: {
			const { email, password } = (action as SignInAction).payload;
			const { user } = await signIn(email, password);
			return { ...prev, ...user };
		}
		case AuthActionTypes.SIGN_UP: {
			const { email, password } = (action as SignUpAction).payload;
			const { user } = await signUp(email, password);
			return { ...prev, ...user };
		}
		case AuthActionTypes.SIGN_OUT: {
			await signOut();
			return Promise.resolve(null);
		}
		default: {
			return Promise.resolve(prev);
		}
	}

};