We Keep Coding

Updating state, gives empty state in react redux toolkit

Am trying to make a login and add the return data to state, when I try to update state, it still gets empty state. I have added the code below, Please help me fix it. Am using RTK query to make the login mutation, and am new to this.
My AuthApi.js
import { createApi, fetchBaseQuery } from "#reduxjs/toolkit/query/react";
import { api } from "./api";
export const authApi = createApi({
reducerPath: "authApi",
baseQuery: fetchBaseQuery({
baseUrl: api
}),
endpoints: (builder) => ({
loginUser: builder.mutation({
query: (body) => {
return {
url: "login",
method: "post",
body,
};
},
}),
registerUser: builder.mutation({
query: (body) => {
return {
url: "register",
method: "post",
body,
};
},
}),
}),
});
export const { useLoginUserMutation, useRegisterUserMutation } = authApi;
My userSlice.js
import { createSlice } from "#reduxjs/toolkit";
import { authApi } from "../../services/authApi";
const initialState = {
role: null,
accessToken: null,
userData: null
}
export const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
logout: (state) => {
state.currentUser = null;
state.errorMessage = ''
}
},
extraReducers: (builders) => {
builders.addMatcher(authApi.endpoints.loginUser.matchFulfilled, (state, action) => {
state.userData = action.payload.success.data
state.accessToken = action.payload.success.accessToken
state.role = action.payload.success.roles
})
}
})
export const { logout } = userSlice.actions
export const selectUser = (state) => state.user.accessToken
export default userSlice.reducer
my store.js
import { configureStore } from "#reduxjs/toolkit";
import { authApi } from "../services/authApi";
import userReducer from './slices/userSlice'
const store = configureStore({
reducer: {
[authApi.reducerPath]: authApi.reducer,
user: userReducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(authApi.middleware),
});
export default store;
console.log(action.payload) in userSlice extraReducer gives me the data in console, but it is not updating the state.

initialState array wont show api info (Redux)

I don't get why dispatch is not sendin list: [] the information, only info I got is list: [] has it's property in never[].
import { createSlice } from "#reduxjs/toolkit";
import axios from "axios";
export const userSlice = createSlice({
name: "users",
initialState: {
list: [] /* (property) list: never[] */
},
reducers: {
setUserList: (state, action) => {
state.list = action.payload;
}
},
});
export const { setUserList } = userSlice.actions;
export default userSlice.reducer;
export const fetchAllUsers = () => (dispatch) => {
axios
.get('https://reqres.in/api/users?page=2')
.then((response) => {
dispatch(setUserList(response.data.data));
})
.catch((error) => console.log(error))
};

React.JS: Using React reduxjs-toolkit

I'm trying to use "#reduxjs/toolkit"
So I have a page: "services.reducer.ts":
const initialState = {
entities: [] as ReadonlyArray<IServices>,
entity: defaultValue,
loading: false,
totalItems: 0
}
export type ServiceState = Readonly<typeof initialState>;
export const getEntities = createAsyncThunk(
'services/getEntities',
async () => {
const response = await axios.get<any>(apiUrl)
return response.data
}
)
export const getEntity = createAsyncThunk(
'services/getEntity',
async (id: number | string) => {
const response = await axios.get<any>(`${apiUrl}/${id}`);
return response.data
}
)
export const ServiceSlice = createSlice({
name: 'services',
initialState,
reducers: {},
extraReducers(builder) {
builder
.addCase(getEntities.pending, (state, action) => {
state.loading = false;
})
.addCase(getEntities.fulfilled, (state, action) => {
const { data } = action.payload;
state.entities = data;
state.loading = true;
state.totalItems = parseInt(action.payload.length, 10);
})
.addCase(getEntity.fulfilled, (state, action) => {
const { data } = action.payload;
state.entity = data;
})
}
})
on my services.tsx:
export const Services = (props: IServicesProps) => {
const dispatch = useAppDispatch();
const [list, setList] = useState([]);
const [loading, setLoading] = useState(false)
useEffect(() => {
dispatch(getEntities())
.then((resp) => {
console.log("resp ", resp)
if (resp.payload !== null) {
setLista(resp.payload)
}
})
}, []);
Now my question is: I would to use the info about loading and totalItems for example. But I don't understand how can I use in on my services.tsx
I have, for example, set:
state.loading = true;
state.totalItems = parseInt(action.payload.length, 10);
but I don't understand if they are declared in the right place or not.
EDIT:
store.ts
import { AnyAction, configureStore, ThunkAction } from '#reduxjs/toolkit';
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import reducer from 'app/shared/reducers';
import errorMiddleware from './error-middleware';
import notificationMiddleware from './notification-middleware';
import loggerMiddleware from './logger-middleware';
import { loadingBarMiddleware } from 'react-redux-loading-bar';
const store = configureStore({
reducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: false,
}).concat(errorMiddleware, notificationMiddleware, loadingBarMiddleware(), loggerMiddleware),
})
const getStore = () => store;
export type IRootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useAppSelector: TypedUseSelectorHook<IRootState> = useSelector;
export const useAppDispatch = () => useDispatch<AppDispatch>();
export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, IRootState, unknown, AnyAction>;
export default getStore;
EDIT 2:
import { loadingBarReducer as loadingBar } from 'react-redux-loading-bar';
import { combineReducers } from 'redux';
import authentication, { AuthenticationState } from './authentication';
import applicationProfile, { ApplicationProfileState } from './application-profile';
import administration, { AdministrationState } from 'app/modules/administration/administration.reducer';
import userManagement, { UserManagementState } from './user-management';
// prettier-ignore
import services, {
ServiceState
} from 'app/entities/service/service.reducer';
// prettier-ignore
/* jhipster-needle-add-reducer-import - JHipster will add reducer here */
export interface IRootState {
readonly authentication: AuthenticationState;
readonly applicationProfile: ApplicationProfileState;
readonly administration: AdministrationState;
readonly userManagement: UserManagementState;
readonly services: ServicesState;
readonly loadingBar: any;
}
const rootReducer = combineReducers<IRootState>({
authentication,
applicationProfile,
administration,
userManagement,
services,
,
/* jhipster-needle-add-reducer-combine - JHipster will add reducer here */
loadingBar,
});
export default rootReducer;
EDIT 3: console.log("resp", resp):
{
"type": "services/getEntities/fulfilled",
"payload": [
{
"srvCod": 1,
"srvDescod": "Account Savings",
"srvDescodmaia": "Corporate Islan",
"srvDestitle": "Oklahoma",
},
],
"meta": {
"arg": {
"sortParam": "srvCod,asc",
"pageParam": 0
},
"requestId": "OTD4JuHBUeYF7ueyg6BQ2",
"requestStatus": "fulfilled"
}
}

Illegal constructor using useSelector from react-redux lib?

Why do I get this error?
TypeError: Illegal constructor
Beow is my store.js file:
import { configureStore, combineReducers } from '#reduxjs/toolkit'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import formReducer from './features/form/form'
import modalReducer from './features/modal-status/modal'
const persistConfig = {
key: 'root',
storage,
}
const rootReducer = combineReducers({
modal: modalReducer,
process: formReducer
})
const persistedReducer = persistReducer(persistConfig, rootReducer)
export default function createStore() {
let store = configureStore({
reducer: persistedReducer,
devTools: true
})
let persistor = persistStore(store)
return { store, persistor }
}
Below is my form reducer code:
import { createSlice } from '#reduxjs/toolkit'
export const formSlice = createSlice({
name: 'process',
initialState: {
type: 'UNKNOWN',
isLogined: false,
username: null,
clientId: null,
avatarUri: null
},
reducers: {
process(state, action) {
if(action.payload.type == 'LOGIN') {
if('username' in action.payload && 'clientId' in action.payload && 'avatarUri' in action.payload) {
return {
...state,
type: 'LOGIN',
isLogined: action.payload.isLogined,
username: action.payload['username'],
clientId: action.payload['clientId'],
avatarUri: action.payload['avatarUri'],
}
}
} else {
return state
}
}
}
})
export const { process } = formSlice.actions
export default formSlice.reducer
And in react component I used useSelector hook like below:
const isLogin = useSelector(state => state.process.isLogined)

Redux store reducers implement wrong interfaces

I created a redux store with 2 different "Slice". First, I have an appSlice:
appSlice.ts
import { createSlice, PayloadAction } from "#reduxjs/toolkit";
import type { RootState } from "./store";
export interface CounterState {
value: number;
}
const initialState: CounterState = {
value: 0,
};
export const appSlice = createSlice({
name: "counter",
initialState,
reducers: {
increment: (state) => {
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
},
incrementByAmount: (state, action: PayloadAction<number>) => {
state.value += action.payload;
},
},
});
export const { increment, decrement, incrementByAmount } = appSlice.actions;
export const selectCount = (state: RootState) => state.app.value;
export default appSlice.reducer;
And I have a cameraSlice.ts
import { createSlice, PayloadAction } from "#reduxjs/toolkit";
import type { RootState } from "./store";
export interface CameraState {
cameraImage: string | null;
}
const initialState: CameraState = {
cameraImage: null,
};
export const cameraSlice = createSlice({
name: "camera",
initialState,
reducers: {
setCameraImage: (state, action: PayloadAction<string>) => {
state.cameraImage = action.payload;
},
resetCameraImage: (state) =>{
state.cameraImage=null;
}
},
});
export const { setCameraImage, resetCameraImage } = cameraSlice.actions;
export const selectCameraImage = (state: RootState) => state.camera.cameraImage;
export default cameraSlice.reducer;
The error coming from this selectCameraImage, the error message: Property 'cameraImage' does not exist on type 'CounterState'.
Now my store looks like this:
store.ts
import { configureStore } from "#reduxjs/toolkit";
import appReducer from "./appSlice";
import cameraReducer from "./appSlice";
export const store = configureStore({
reducer: {
app: appReducer,
camera: cameraReducer,
},
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
hooks.ts:
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import type { RootState, AppDispatch } from "./store";
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
How can I fix that issue? Now, the app and the camera are CounterState type, I don't know why.
If you have any idea, please let me know! Thanks for your time!

I don't see a CounterState defined anywhere there, so maybe you just have another file flying around?
Also, if you take a look at your imports,
import appReducer from "./appSlice";
import cameraReducer from "./appSlice";
is definitely wrong.