DEV Community

Harendra
Harendra

Posted on

This is the redux setup for app

import { store } from '@/src/redux/store'
import { Provider } from 'react-redux'

export default function StoreProvider({ children }) {
  return <Provider store={store}>{children}</Provider>
}
Enter fullscreen mode Exit fullscreen mode

src/redux/store.js

import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/query'
import { authApi } from './services/auth'
import authReducer from './slices/authSlice';

export const store = configureStore({
  reducer: {
    [authApi.reducerPath]: authApi.reducer,
    auth: authReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(authApi.middleware),
})

setupListeners(store.dispatch)
Enter fullscreen mode Exit fullscreen mode

src/redux/slices/authSlice.js

import { createSlice } from '@reduxjs/toolkit';
import AsyncStorage from '@react-native-async-storage/async-storage';

const initialState = {
  user: null,
  token: null,
  isAuth: false,
};

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setCredentials: (state, { payload }) => {
      state.user = payload.user;
      state.token = payload.access_token;
      state.isAuth = true;
      // Store token in AsyncStorage
      AsyncStorage.setItem('token', payload.access_token);
    },
    logout: (state) => {
      state.user = null;
      state.token = null;
      state.isAuth = false;
      // Remove token from AsyncStorage
      AsyncStorage.removeItem('token');
    },
  },
});

export const { setCredentials, logout } = authSlice.actions;
export default authSlice.reducer;
Enter fullscreen mode Exit fullscreen mode

redux/services/auth

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { Platform } from 'react-native'
import AsyncStorage from '@react-native-async-storage/async-storage';

// Helper to get the correct base URL based on platform
const getBaseUrl = () => {
  if (__DEV__) {
    if (Platform.OS === 'android') {
      return 'http://192.168.210.147:8000/api/'  
    }
    return 'http://localhost:8000/api/'    
  }
  return 'http://your-production-url.com/api/'  
}

export const authApi = createApi({
  reducerPath: 'authApi',
  baseQuery: fetchBaseQuery({ 
    baseUrl: getBaseUrl(),
    prepareHeaders: async (headers) => {
      headers.set('Content-Type', 'application/json');
      const token = await AsyncStorage.getItem('token');
      if (token) {
        headers.set('Authorization', `Bearer ${token}`);
      }
      return headers;
    },
  }),
  endpoints: (builder) => ({
    signupUser: builder.mutation({
      query: (user) => ({
        url: 'signup', 
        method: 'POST',
        body: user,
      }),
    }),
    verifyEmail: builder.mutation({
      query: (user) => ({
        url: 'verifyEmail', 
        method: 'POST',
        body: user,
      }),
    }),
    loginUser: builder.mutation({
      query: (user) => ({
        url: 'login', 
        method: 'POST',
        body: user,
      }),
    }),
  }),
})
export const { useSignupUserMutation, useVerifyEmailMutation, useLoginUserMutation } = authApi;


Enter fullscreen mode Exit fullscreen mode

Top comments (0)