mirror of
https://github.com/cssgunc/compass.git
synced 2025-04-20 10:30:16 -04:00
Created a storeProvider
This commit is contained in:
parent
d4fcadcce7
commit
597b5ede58
17
compass/app/StoreProvider.tsx
Normal file
17
compass/app/StoreProvider.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
'use client'
|
||||||
|
import { useRef } from 'react'
|
||||||
|
import { Provider } from 'react-redux'
|
||||||
|
import { makeStore, AppStore } from '../utils/store'
|
||||||
|
|
||||||
|
export default function StoreProvider({
|
||||||
|
children
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
const storeRef = useRef<AppStore>()
|
||||||
|
if (!storeRef.current) {
|
||||||
|
storeRef.current = makeStore()
|
||||||
|
}
|
||||||
|
|
||||||
|
return <Provider store={storeRef.current}>{children}</Provider>
|
||||||
|
}
|
|
@ -1,20 +1,12 @@
|
||||||
import '../styles/globals.css';
|
import '../styles/globals.css';
|
||||||
import { Metadata } from 'next'
|
import StoreProvider from './StoreProvider';
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
|
||||||
title: 'Login',
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
// Layouts must accept a children prop.
|
|
||||||
// This will be populated with nested layouts or pages
|
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<StoreProvider>{children}</StoreProvider>
|
||||||
<body>{children}</body>
|
|
||||||
</html>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
8
compass/utils/hooks.ts
Normal file
8
compass/utils/hooks.ts
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
import { useDispatch, useSelector, useStore } from 'react-redux'
|
||||||
|
import type { TypedUseSelectorHook } from 'react-redux'
|
||||||
|
import type { RootState, AppStore, AppDispatch } from './store'
|
||||||
|
|
||||||
|
|
||||||
|
export const useAppDispatch: () => AppDispatch = useDispatch
|
||||||
|
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
|
||||||
|
export const useAppStore: () => AppStore = useStore
|
13
compass/utils/store.ts
Normal file
13
compass/utils/store.ts
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
// store.ts
|
||||||
|
import { configureStore } from '@reduxjs/toolkit';
|
||||||
|
import userSlice from './features/user/userSlice';
|
||||||
|
|
||||||
|
export const makeStore = () => configureStore({
|
||||||
|
reducer: {
|
||||||
|
user: userSlice,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export type AppStore = ReturnType<typeof makeStore>;
|
||||||
|
export type RootState = ReturnType<AppStore['getState']>;
|
||||||
|
export type AppDispatch = AppStore['dispatch'];
|
Loading…
Reference in New Issue
Block a user