redux-toolkit query auth persist

Question

Hello I have created a application that working fine to create user, fetch users, add post, reaction, delete a post. now I want to add AUTH to my application. but I m confused how to persist the state, add reducers, actions and initialize a state like this.

I am sharing some code here:

import { LOCAL_LOGIN, LOGIN, SIGN_OUT} from '../types';
const initialState = {
    user:null,
    token:null,
    is_logged_in:false
};
const LoginReducer = (state = initialState, action) => {
    switch(action.type) {
        case LOGIN:
            return {
                ...state,
                user:action.payload.data,
                token:action.payload.access_token,
                is_logged_in:true,
            };
        case LOCAL_LOGIN:
            return{
                ...state,
                user:action.payload.data,
                token:action.payload.access_token,
                is_logged_in:true,
            }
        case SIGN_OUT:
            return{
                ...state,
                user:null,
                is_logged_in:false
            }
        default:
            return state;
        }
    }
export default LoginReducer;

this was working fine. Here is my new code

/// apiSlice.js

import {
    createApi,
    fetchBaseQuery
  } from "@reduxjs/toolkit/query/react";
  
  export const apiSlice = createApi({
    reducerPath: "api",
    baseQuery: fetchBaseQuery({
      baseUrl: "https://ab91-203-82-55-110.ngrok.io/"
    }),
    tagTypes: ['Post', 'User'],
    endpoints: builder => ({})
  });

/// postSlice.js

import {
    createSelector,
    createEntityAdapter
} from "@reduxjs/toolkit";
import { apiSlice } from "../api/apiSlice";
const usersAdapter = createEntityAdapter()
const initialState = usersAdapter.getInitialState()
export const usersApiSlice = apiSlice.injectEndpoints({
    endpoints: builder => ({
        getUsers: builder.query({
            query: () => '/users',
            transformResponse: responseData => {
                return usersAdapter.setAll(initialState, responseData)
            },
            providesTags: (result, error, arg) => [
                { type: 'User', id: "LIST" },
                ...result.ids.map(id => ({ type: 'User', id }))
            ]
        }),
        getUserByUserId: builder.query({
            query: id => `users/${id}`,
        })
    })
})

export const { useGetUsersQuery, useGetUserByUserIdQuery } = usersApiSlice

// returns the query result object
export const selectUsersResult = usersApiSlice.endpoints.getUsers.select()

// Creates memoized selector
const selectUsersData = createSelector( selectUsersResult,usersResult => usersResult.data)

//getSelectors creates these selectors and we rename them with aliases using destructuring
export const {
    selectAll: selectAllUsers,
    selectById: selectUserById,
    selectIds: selectUserIds
    // Pass in a selector that returns the posts slice of state
} = usersAdapter.getSelectors(state => selectUsersData(state) ?? initialState)

and same has userSlice.js

my goal is to add AuthSlice with custom reducers and when I call login then the state will be initialize , Here is what I tried to do.

import { createSlice,  createSelector,createEntityAdapter } from "@reduxjs/toolkit";
const usersAdapter = createEntityAdapter()
const initialState = usersAdapter.getInitialState({
    user: null,
    is_logged_in:false,
    token:null
  })

  
  export const loginSlice = createSlice({
    initialState,
    name: 'userSlice',
    reducers: {
      logout: () => initialState,
      setUser: (state, action) => {
        state.user = action.payload.user,
        state.token = action.payload.token,
        state.is_logged_in = true
      },
    },
  });
  
  export default loginSlice.reducer;
  
  export const { logout, setUser } = loginSlice.actions;

but i am confused how can i call there reducers.

Answer 1

this is very old but in case anyone finds this. this is how you go about this

in your rtk-query API

export const api = createApi({
  reducerPath: 'OIS-API',
  baseQuery: fetchBaseQuery({
    baseUrl: `${base_url}`,
    credentials: 'include',
    extractRehydrationInfo(action, { reducerPath }) {
      if (action.type === REHYDRATE) {
        return action.payload[reducerPath];
      }
    },
    prepareHeaders: (headers, { getState }) => {
      const token =
       const token = getState().auth.token;
      if (token) {
        headers.set('authentication', `Bearer ${token}`);
      }
      return headers;
    },
  }),
  tagTypes: ['data'],
  endpoints: (builder) => ({
    signInWithgoogle: builder.mutation({
      omitted
     })

then in your auth slice

extraReducers: (builder) => {
    builder.addMatcher(
      api.endpoints.signInWithgoogle.matchFulfilled,
      (state, { payload }) => {
          state.token = payload.token;
          state.user = payload.user;
          state.isLoggedIn = true;
      }
    );
  },

more info Simulating Axios-like interceptors with a custom base query

you are adding the token to every HTTP request to the header.