Redux
  • GlobalContext Api
  • Redux Easy
  • temp-practice
Powered by GitBook
On this page

Was this helpful?

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
PreviousRedux Easy

Last updated 1 year ago

Was this helpful?