Breaking News: Grepper is joining You.com. Read the official announcement!

presist-redux

Paval EP answered on July 4, 2023 Popularity 6/10 Helpfulness 1/10

answer presist-redux

presist-redux

Comment

import { configureStore, createSlice, combineReducers, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';

interface PersistState {
  darkMode: boolean;
}

const persistInitialState: PersistState = {
  darkMode: false,
};

const persistSlice = createSlice({
  name: 'persist',
  initialState: persistInitialState,
  reducers: {
    updateDarkMode: (state, action: PayloadAction<boolean>) => {
      state.darkMode = action.payload;
    },
    resetPersist: () => persistInitialState,
  },
});

interface UserState {
  profileDetails: object;
}

const initialUserState: UserState = {
  profileDetails: {},
};

const fetchProfileDetails = createAsyncThunk(
  'goLongUser/fetchProfileDetails',
  async (userId: string, thunkAPI) => {
    // Perform asynchronous logic to fetch profile details
    const response = await fetch(`https://api.example.com/profiles/${userId}`);
    const profileDetails = await response.json();

    return profileDetails;
  }
);

const userSlice = createSlice({
  name: 'goLongUser',
  initialState: initialUserState,
  reducers: {
    resetUser: () => initialUserState,
  },
  extraReducers: (builder) => {
    builder.addCase(fetchProfileDetails.fulfilled, (state, action) => {
      state.profileDetails = action.payload;
    });
  },
});

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
};

const rootReducer = combineReducers({
  persist: persistSlice.reducer,
  user: userSlice.reducer,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const {
  updateDarkMode,
  resetPersist,
} = persistSlice.actions;

export const {
  resetUser,
} = userSlice.actions;

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(thunk.default),
});

export const persistor = persistStore(store);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Popularity 6/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Jul 04 2023

Paval EP

0 Answers Avg Quality 2/10

presist-redux

Contents

More Related Answers

presist-redux

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.