CODEWITHSUNDEEP
typescriptreact-reduxrxjs
Hafiz Temuri
Hafiz Temuri

Reputation: 4112

Convert Promise to Observable with React-Redux and TypeScript

I know there are few solutions available, but I cant seem to wrap around my head to this concept. I think it would be better if I can find a solution to my issue.

I am using a library that returns a Promise but I want to store this response (Whether success or failed) into Redux.

interface IResponseType {
  accessToken: string;
}

const authLogin = (
  username: string,
  password: string
): Promise<IResponseType> => {
  return new Promise(resolve => {
    return resolve({ accessToken: "something" });
  });
};

export const loginEpic: IEpic = (
  action$: ActionsObservable<ITestLoadAction>,
  store: StateObservable<IStore>
): Observable<IAction> =>
  action$.ofType(TEST.REQUEST).pipe(
    from(authLogin("username", "password")).pipe(
      map(
        (response: IResponseType): IAction => testLoadSuccessAction(response)
      ),
      catchError(() =>
        ActionsObservable.of(testLoadFailedAction("Test Loading failed."))
      )
    )
  );

IAction

interface IAction {
    type: any;
    [key: string]: any;
}

IEpic

export type IEpic = Epic<IAction, IAction, IStore, EpicDependencies>;

The typescript error I am getting

Argument of type 'Observable<IAction | ITestLoadFailedAction>' is not assignable to parameter of type 'OperatorFunction<ITestLoadAction, IAction>'.
  Type 'Observable<IAction | ITestLoadFailedAction>' provides no match for the signature '(source: Observable<ITestLoadAction>): Observable<IAction>'.ts(2345)

I have created a sandbox for this. It seems to give the error in the editor but it compiles fine. Maybe I made a mistake with some configurations. But here is the link if needed. https://codesandbox.io/embed/agitated-mccarthy-sfq01

enter image description here

Upvotes: 1

Views: 123

Answers (1)

pascalpuetz
pascalpuetz

Reputation: 5418

What you want to do is accomplished by using switchMap Operator Function.

action$.ofType(TEST.REQUEST).pipe(
      switchMap(() => from(authLogin("username", "password"))), 
      map(response => testLoadSuccessAction(response)),
      catchError(() => ActionsObservable.of(testLoadFailedAction("Test Loading failed."))
)

Upvotes: 1

Related Questions