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",