import React, { useReducer, useContext } from 'react';
import { usePersistedContext, usePersistedReducer } from '@hook/usePersist';

import RootContainer from '@container/RootContainer';
import RootContext from '@context/RootContext';
import RootReducer from '@slice/RootSlice';
import Properties from '@constant/Properties';

const App = () => {
  const globalStore = usePersistedContext(
    useContext(RootContext),
    Properties.STORE_KEY,
  );

  const [state, dispatch] = usePersistedReducer(
    useReducer(RootReducer, globalStore),
    Properties.STORE_KEY,
  );

  return (
    <RootContext.Provider value={{ state, dispatch }}>
      <RootContainer />
    </RootContext.Provider>
  );
};

export default App;