How do I store value from createApi to redux store?

Question

I'm trying to store an value of an user data(name, email and other) that was fetch using createApi to redux store. But I don't know how to do it and what is the good practice one.

userApi.js file

export const userApi = createApi({
  reducerPath: "userApi",
  baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:5000" ,
  credentials: "include",
  tagTypes: ['Users'],
  prepareHeaders: (headers, { getState }) => {
    const { accessToken } = getState().auth;
    if (accessToken) {
      headers.set('Authorization', `Bearer ${accessToken}`);
    }

    return headers;
  }
  }),
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => "/users",
      // this is used when when we want to validate and update UI
      providesTags:["Users"],
      //this is used to specify which object we wanna show
      transformResponse: (response) => response.data,
    }),
    loginUser : builder.mutation({
      query: (value) => ({
        url : "/login",
        method : "POST",
        body : value,
      })
    }),

export const { 
    useGetUsersQuery, 
    useLoginUserMutation} = userApi;

I'm trying put the value in to the state of this slice. authSlice.js file

const initialState = {
    user: null,
    accessToken : null,
}

const authSlice = createSlice({
    name : "auth",
    initialState,
    reducers: {
        setUser: (state, action) =>{
            state.user = action.payload ;
        },
        setAccessToken: (state, action) =>{
            state.accessToken = action.payload;
        },
        logOut: () => initialState
    },
})


export const { setUser, setAccessToken, logOut } = authSlice.actions;

export default authSlice.reducer

export const selectUser = (state) => state.auth.user;
export const selectAccessToken = (state) => state.auth.accessToken;

I watch a tutorial before and I remember that you can use extraReducer and addCase but I don't remember the video name and I don't know if that is a good practic so can someone show me the right way and good practice way.

Thanks.

score 0 · Answer 1 · answered Mar 04 '23 at 13:23

you can do this:

import { setUser, setAccessToken } from '[API/PATH]';

then you have access dispatch in onCacheEntryAdded. you can do it with queryFn too you have the dispatch as the second argument like queryFn: (value, { dispatch }) => ...

 loginUser : builder.mutation({
      query: (value) => ({
        url : "/login",
        method : "POST",
        body : value,
      })
    }),
    async onCacheEntryAdded(arg, { cacheDataLoaded, dispatch, getCacheEntry }) {
                await cacheDataLoaded;
                const result = getCacheEntry();
                const { data } = result;
                const { accessToken } = data;
                dispatch(setUser(data));
                dispatch(setAccessToken(accessToken))
            },

How do I store value from createApi to redux store?

1 Answers1