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

store configuration with presist-redux

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

answer store configuration with presist-redux

store configuration with 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';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

// User Actions
import { fetchProfileDetails } from './userActions';

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 userSlice = createSlice({
  name: 'goLongUser',
  initialState: initialUserState,
  reducers: {
    resetUser: () => initialUserState,
    addProfileDetails: (state, action: PayloadAction<object>) => {
      state.profileDetails = action.payload;
    },
  },
  extraReducers: (builder) => {
    builder.addCase(fetchProfileDetails.fulfilled, (state, action) => {
      state.profileDetails = action.payload;
    }).addCase(fetchProfileDetails.rejected, (state, action) => {
      // state.profileDetails = {};
    });
  },
});

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  whitelist: ['persist'], // Specify the slice(s) to persist
};

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

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk, logger),
});

const persistor = persistStore(store);

export { store, persistor };

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: configuration javascript store

Link to this answer
Share Copy Link

Contributed on Jul 05 2023

Paval EP

0 Answers Avg Quality 2/10

store configuration with presist-redux

Contents

More Related Answers

store configuration with presist-redux

Grepper

Documentation

Social

Legal

Contact

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