// store.ts
import {
  reducerRegistryEnhancer,
  useReducerRegistry as _useReducerRegistry,
  UseReducerRegistry,
} from './react-redux-code-split'
import reducer1 from './reducer1'
import reducer2 from './reducer2'
import { applyMiddleware, createStore, combineReducers } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly'
import thunk from 'redux-thunk'

// Initial reducers
const initialReducers = { reducer1, reducer2 }

// Initial state
const InitialState = { /* ... */ }

// Create Store
export const store = createStore(
  combineReducers(initialReducers),
  initialState,
  // It is easy to compose reducerRegistryEnhancer() with the other enhancers
  composeWithDevTools(
    applyMiddleware(thunk),
    // Pass initialReducers to reducerRegistryEnhancer()
    reducerRegistryEnhancer(initialReducers)
  )
)

// Type useReducerRegistry as initialReducers has been already applied to the store.
// If there are no initial reducers, you can use useReducerRegistry directly without this additional typing 
export const useReducerRegistry: UseReducerRegistry<typeof initialReducers> = _useReducerRegistry

---

// MyComponent1.tsx
import { useReducerRegistry } from './store'
import additinalReducer from './additinalReducer'

const reducers = { additinalReducer }

const MyComponent1 = () => {
  // Register reducers and retrieve typed useSelector and useDispatch
  const { useSelector, useDispatch } = useReducerRegistry(reducers)
  // ...
}

---

// MyComponent2.tsx
import { useReducerRegistry } from './store'

const MyComponent2 = () => {
  // If you only need initialReducers in this component,
  // you can call useReducerRegistry without argument
  const { useSelector, useDispatch } = useReducerRegistry()
  // ...
}