Created
November 20, 2022 17:33
-
-
Save KartikBazzad/64e9eee60e79bef861a3b0cc4ab13706 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // store.ts | |
| import { | |
| configureStore, | |
| AnyAction, | |
| TypedStartListening, | |
| TypedAddListener, | |
| addListener, | |
| } from "@reduxjs/toolkit"; | |
| import { | |
| FLUSH, | |
| PAUSE, | |
| PERSIST, | |
| persistStore, | |
| PURGE, | |
| REGISTER, | |
| REHYDRATE, | |
| persistReducer, | |
| } from "redux-persist"; | |
| import { encryptTransform } from "redux-persist-transform-encrypt"; | |
| import storage from "./storage"; | |
| import combinedReducers from "./reducers"; | |
| import listenerMiddleware from "./middlewares"; | |
| export const rootReducer = (state: any, action: any) => { | |
| if (action.type === "RESET_STATE_ACTION_TYPE") { | |
| state = {} as RootState; | |
| } | |
| return combinedReducers(state, action); | |
| }; | |
| const persistConfig = { | |
| key: "root", | |
| storage, | |
| serialize: true, | |
| version: 0, | |
| transform: [ | |
| encryptTransform({ | |
| secretKey: "thisisreduxstatesecretKey", | |
| onError: (err) => console.log(err), | |
| }), | |
| ], | |
| }; | |
| const persistedReducer = persistReducer< | |
| ReturnType<typeof rootReducer>, | |
| AnyAction | |
| >(persistConfig, rootReducer); | |
| const store = configureStore({ | |
| reducer: persistedReducer, | |
| middleware: (gDM) => | |
| gDM({ | |
| serializableCheck: { | |
| ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], | |
| }, | |
| }).concat(listenerMiddleware.middleware), | |
| }); | |
| export const persistor = persistStore(store); | |
| export type RootState = ReturnType<typeof store.getState>; | |
| export type AppDispatch = typeof store.dispatch; | |
| export type AppStartListening = TypedStartListening<RootState, AppDispatch>; | |
| export type AppAddListener = TypedAddListener<RootState, AppDispatch>; | |
| export const addAppListener = addListener as TypedAddListener< | |
| RootState, | |
| AppDispatch | |
| >; | |
| export default store; | |
| // Counter Slice | |
| import { createSlice, PayloadAction } from "@reduxjs/toolkit"; | |
| const initialState = { value: 0 }; | |
| const counterSlice = createSlice({ | |
| name: "counter", | |
| initialState, | |
| reducers: { | |
| inc: (state) => ({ value: state.value + 1 }), | |
| dec: (state) => ({ value: state.value - 1 }), | |
| }, | |
| }); | |
| export const counterActions = counterSlice.actions; | |
| export default counterSlice.reducer; | |
| // hooks.ts | |
| import { useDispatch, useSelector } from "react-redux"; | |
| import type { TypedUseSelectorHook } from "react-redux"; | |
| import type { RootState, AppDispatch } from "../store"; | |
| // Use throughout your app instead of plain `useDispatch` and `useSelector` | |
| export const useAppDispatch: () => AppDispatch = useDispatch; | |
| export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector; | |
| // loginPage.tsx | |
| function LoginPage() { | |
| const router = useRouter(); | |
| const activeContext = useAppSelector(getActiveContext); | |
| const dispatch = useAppDispatch(); | |
| async function loginUser() { | |
| try { | |
| dispatch(authActions.signIn); | |
| console.log("Hello"); | |
| } catch (error) { | |
| console.log(error); | |
| } | |
| } | |
| useEffect(() => { | |
| if (activeContext.isLoggedIn && activeContext.currentUser) { | |
| const redirectURL = router.query.redirectTo; | |
| if (redirectURL && typeof redirectURL === "string") { | |
| router.replace(redirectURL); | |
| } else { | |
| router.push("/"); | |
| } | |
| } | |
| }, [activeContext.currentUser, activeContext.isLoggedIn]); | |
| return ( | |
| <div className="max-w-6xl flex flex-col gap-7 items-center justify-center rounded-3xl px-8 mx-4 h-[400px] bg-white w-full outline"> | |
| <Text className=" text-[#6fedd6] text-3xl" fw={800}> | |
| Login and start creating Posts | |
| </Text> | |
| <button onClick={() => dispatch(counterActions.inc)}>Add</button> | |
| <button onClick={() => dispatch(counterActions.dec)}>Sub</button> | |
| <Button | |
| onClick={loginUser} | |
| leftIcon={ | |
| <Image | |
| width={24} | |
| height={24} | |
| alt="Google" | |
| src={"/assets/googleLogo.svg"} | |
| /> | |
| } | |
| variant="outline" | |
| size="lg" | |
| > | |
| Login with Google | |
| </Button> | |
| </div> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment