temp-practice
disclamer 🚨 donot use this ,,, this is only practice which i used to log
// src/index.ts
import { bindActionCreators, combineReducers, configureStore } from '@reduxjs/toolkit';
import { useSelector } from 'react-redux';
import React, { useEffect } from 'react';
import { createReduxSlice } from './createReduxSlice';
type RootState = ReturnType<typeof reduxStore.getState>;
const BindActionCreator = (slice, dispatch) => {
slice.setters.actions = bindActionCreators(slice.setters.actions, dispatch);
};
export const reduxStore = configureStore({
reducer: {} as typeof rootReducer,
middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
});
// 1.1) DYNAMICALLY IMPORT AND REGISTER THE SLICES
const sliceModules = import.meta.glob('./slices/*.tsx');
const sliceNames = Object.keys(sliceModules).map((path) => {
const sliceName = path.match(/\.\/slices\/(.*)\.tsx$/)?.[1];
return sliceName;
});
const slices = sliceNames.map((sliceName) => {
const module = sliceModules[`./slices/${sliceName}.tsx`];
return module(sliceName, reduxStore.dispatch);
});
const rootReducer = combineReducers(
slices.reduce((acc, slice) => ({ ...acc, [slice.reducerName]: slice.reducer }), {})
);
reduxStore.replaceReducer(rootReducer);
slices.forEach((slice) => {
BindActionCreator(slice, reduxStore.dispatch);
});
// 1.2) EXPORT THE STORES
// Export the custom hook generator function
export const createUseSlice = <T extends string>(sliceName: T) => () => ({
state: useSelector((state: RootState) => state[sliceName]),
actions: slices.find((slice) => slice.reducerName === sliceName)?.setters,
});
// 1.3) DYNAMICALLY EXPORT CUSTOM HOOKS FOR EACH SLICE
const customHooks = {} as {
[K in keyof RootState]: () => [RootState[K], typeof slices[number]['setters']];
};
sliceNames.forEach((sliceName) => {
customHooks[sliceName] = createUseSlice(sliceName);
});
export default customHooks;
// 1.4) EXPORT TYPES
// Export types for each slice if needed
Last updated
Was this helpful?