I followed the documentation and implemented the following:
middleware/index.ts
import { combineEpics } from "redux-observable";
import userEpic from "./userEpic";
export const rootEpic = combineEpics(
userEpic,
);
store.ts
import { configureStore } from "@reduxjs/toolkit";
import { createEpicMiddleware } from "redux-observable";
import { rootEpic } from "../middleware";
import userReducer from "./reducers/userSlice";
const rootReducer = {
user: userReducer,
};
const epicMiddleware = createEpicMiddleware();
export const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(epicMiddleware),
});
epicMiddleware.run(rootEpic);
export type RootStateType = ReturnType<typeof store.getState>;
export type AppDispatchType = typeof store.dispatch;
export default store;
actions.ts
export const LOGIN_USER = "LOGIN_USER";
export const loginUser = () => {
return {
type: LOGIN_USER,
} as const;
};
export type LoginUserAction = ReturnType<typeof loginUser>;
userEpic.ts (set up for testing purposes instead of API calls)
import { Action } from "@reduxjs/toolkit";
import { Observable } from "rxjs";
import { combineEpics, ofType } from "redux-observable";
import { LOGIN_USER } from "./actions";
import { map } from "rxjs/operators";
import { setUserData } from "../../redux/reducers/userSlice";
const fetchUserEpic = (action$: Observable<Action>) => {
return action$.pipe(
ofType(LOGIN_USER),
map(() =>
setUserData({
id: 12,
name: "test",
surname: "test",
username: "test",
refreshToken: "test",
accessToken: "test",
})
)
);
};
export default combineEpics(fetchUserEpic);
userSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { FetchStatus } from "../../modules/types";
import { RootStateType } from "../store";
type UserType = {
id: number;
name: string;
surname: string;
username: string;
refreshToken: string;
accessToken: string;
};
type UserStateType = {
user: UserType | null;
userFetchStatus: FetchStatus;
};
const initialUserState: UserStateType = {
user: null,
userFetchStatus: FetchStatus.success,
};
export const userSlice = createSlice({
name: "user",
initialState: initialUserState,
reducers: {
setUserData: (state, action: PayloadAction<UserType>) => {
state.user = action.payload;
state.userFetchStatus = FetchStatus.success;
},
setUserFetchingStatus: (state, action: PayloadAction<FetchStatus>) => {
state.userFetchStatus = action.payload;
},
clearUserData: () => {
return initialUserState;
},
},
extraReducers: (builder) => {
builder.addDefaultCase((state) => {
return state;
});
},
});
export const { setUserData, clearUserData } = userSlice.actions;
export const getUserData = (state: RootStateType) => state.user;
export default userSlice.reducer;
Attempting to console log data after triggering 'loginUser' action in component:
component.ts
const dispatch = useAppDispatch()
const user = useAppSelector(getUserData);
console.log(user)
<TouchableOpacity onPress={() => dispatch(loginUser)}>
//...
package.json
"react-redux": "^8.0.1",
"redux": "^4.2.0",
"redux-observable": "^2.0.0"
The redux store does not seem to update; although 'loginUser' action is dispatched, 'ofType(LOGIN_USER)' does not capture it correctly. Attempted using 'filter(actionFunction.match),' as suggested elsewhere but received a deprecated error.