How hould I use withLatestFromwith with typescript?

107 Views Asked by At

I'm trying to use redux observables with in a new project, but I cant figure out how to use "withLatestFrom". It used to work the way I implemented it but now I get the following error:

'StateObservable<CombinedState<{ auth: AuthState; }>>' is not assignable to parameter of type 'ObservableInput'.

My implementation:

signInEpic:

import { filter, withLatestFrom, mergeMap } from 'rxjs/operators';
import { AppEpic } from 'src/app/store';
import { authSignInRequest } from 'src/auth/slice/authSlice';

export const signInEpic: AppEpic = (
    action$,
    state$
) =>
    action$.pipe(
        filter(authSignInRequest.match),
        withLatestFrom(state$),
        mergeMap(([action,state]) => {
            return [];
        })
    );

setup:

import { AnyAction, combineReducers, configureStore } from '@reduxjs/toolkit';
import { combineEpics, createEpicMiddleware, Epic } from 'redux-observable';
import authReducer from 'src/auth//slice/authSlice';
// import { rootAuthEpic } from 'src/auth/slice/epics';
import { signInEpic } from 'src/auth/slice/epics/signInEpic';

const basicReducers = {
  auth: authReducer,
};

const reducer = combineReducers(basicReducers);

export const rootEpic = combineEpics(
  signInEpic,
  );

export type AppState = ReturnType<typeof reducer>;
export type AppEpic = Epic<AnyAction, AnyAction, AppState>;

const epicMiddleware = createEpicMiddleware<AnyAction, AnyAction, AppState>();

export const store = configureStore({
  reducer,
  middleware: [epicMiddleware]
});

epicMiddleware.run(rootEpic);

authSlice

import { createSelector, createSlice, PayloadAction, createAction } from '@reduxjs/toolkit'
import { AppState } from 'src/app/store/reducer'
import { SignInRequestPayload, User } from 'src/auth/types'

type AuthState = {
  user: User | null
  token: string | null
}

const initialState: AuthState = {
  user: null,
  token: null,
}

const sliceName = 'auth'

const slice = createSlice({
  name: sliceName,
  initialState: { user: null, token: null } as AuthState,
  reducers: {
    // setCredentials: (
    //   state,
    //   { payload: { user, token } }: PayloadAction<{ user: User; token: string }>
    // ) => {
    //   state.user = user
    //   state.token = token
    // },
  },
})

export const authSignInRequest = createAction<void>(
  `${sliceName}/authSignInRequest`
);
export const authSignInSuccessful = createAction<void>(
  `${sliceName}/authSignInSuccessful`
);
export const authSignInFailed= createAction<void>(
  `${sliceName}/authSignInSuccessful`
);

//== Selectors ==//

export const getAuthUser = (state: AppState): User | null =>
  state.auth.user;

export const getAuthUserUsername = (state: AppState): string | undefined =>
  state.auth.user?.username;

export const getAuthIsUserSignedIn = createSelector(
  getAuthUser,
  (user) => !!user
)


//== Exports ==//

export const {
  setCredentials,
} = slice.actions

export default slice.reducer

export const selectCurrentUser = (state: AppState) => state.auth.user

I'm using the latest

    "redux-observable": "^2.0.0",
    "rxjs": "^7.4.0",
    "@reduxjs/toolkit": "^1.7.1",
0

There are 0 best solutions below