rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-17 17:30:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Created a storeProvider

Browse Source
This commit is contained in:
Meliora Ho 2024-02-29 02:36:57 +00:00
parent d4fcadcce7
commit 597b5ede58
6 changed files with 40 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
compass/app/StoreProvider.tsx Normal file
View 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>
}

12
compass/app/layout.tsx
View File

@ -1,20 +1,12 @@
import '../styles/globals.css';
import { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Login',
}
import StoreProvider from './StoreProvider';
export default function RootLayout({
// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
<StoreProvider>{children}</StoreProvider>
)
}

0
compass/app/store.ts
View File

0
compass/features/user/userSlice.ts → compass/utils/features/user/userSlice.ts
View File

8
compass/utils/hooks.ts Normal file
View 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
View 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'];