react-native-template-team-isl/AwesomeProject/src/store/index.ts

Boilarplate by team-isl!

import { configureStore } from '@reduxjs/toolkit';
import { MMKV } from 'react-native-mmkv';
import { createLogger } from 'redux-logger';
import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE, Storage, persistReducer, persistStore } from 'redux-persist';
import commonDataSlice from './reducers/commonData.slice';
import homeScreenSlice from './reducers/homeScreen.slice';

const storage = new MMKV();

export const reduxStorage: Storage = {
	setItem: (key, value) => {
		storage.set(key, value);
		return Promise.resolve(true);
	},
	getItem: key => {
		const value = storage.getString(key);
		return Promise.resolve(value);
	},
	removeItem: key => {
		storage.delete(key);
		return Promise.resolve();
	},
};

const persistMMKVConfig = {
	key: 'mmkvroot',
	storage: reduxStorage,
	blacklist: ['userName',],
	whitelist: ['localize', 'isDarkMode', 'themeSystemSetting', 'isLogin',]
};

const logger: any = createLogger({
	duration: true,
	timestamp: true,
	collapsed: true,
	diff: false,
	level: {
		prevState: 'info', action: 'log',
		nextState: 'info', error: 'error',
	},
	colors: {
		title: () => '#03A9F4',
		prevState: () => '#9E9E9E',
		action: () => '#03A9F4',
		nextState: () => '#4CAF50',
		error: () => '#F20404',
	},
});

const mmkv_CommonDataSlice = persistReducer(persistMMKVConfig, commonDataSlice)
const mmkv_HomeScreen = persistReducer(persistMMKVConfig, homeScreenSlice)

// Define your additional middleware here

const additionalMiddleware = (store: any) => (next: any) => (action: any) => {
	// Middleware logic
	return next(action);
};

const store = configureStore({
	reducer: {
		//multiple reducers
		commonData: mmkv_CommonDataSlice,
		homeScreen: mmkv_HomeScreen,
	},

	middleware: (getDefaultMiddleware) =>
		getDefaultMiddleware({
			serializableCheck: {
				ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
			},
		}).concat(logger, additionalMiddleware), // Add multiple middleware
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const persistor = persistStore(store);

export default store;