DEV Community

Harendra
Harendra

Posted on

1

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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay