added redux to the setup (in src/ts/*), made webpack resolve also .ts files

This commit is contained in:
Karma Riuk 2022-10-27 09:24:07 +02:00
parent 61d31fa3c4
commit fc00f9124c
7 changed files with 64 additions and 8 deletions

View File

@ -16,6 +16,7 @@
"@emotion/styled": "^11.10.4",
"@hookform/resolvers": "^2.9.10",
"@mui/material": "^5.10.9",
"@reduxjs/toolkit": "^1.8.6",
"@types/jest": "^29.1.1",
"@types/node": "^18.8.2",
"@types/node-sass": "^4.11.3",
@ -29,6 +30,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.38.0",
"react-redux": "^8.0.4",
"react-router-dom": "^6.4.2",
"sass": "^1.55.0",
"sass-loader": "^13.1.0",

View File

@ -1,8 +1,9 @@
import * as React from "react";
import { createRoot } from "react-dom/client";
import { createBrowserRouter, Navigate, RouterProvider } from "react-router-dom";
import { MetadataSetter, ErrorPage, Login, ForgotPassword, Reset, Transactions, AuthComponent } from "@components";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { MetadataSetter, ErrorPage, Login, ForgotPassword, Reset, Transactions } from "@components";
import { store } from '@ts/store'
import { Provider } from 'react-redux'
const router = createBrowserRouter([
{
@ -40,7 +41,9 @@ const router = createBrowserRouter([
]);
createRoot(document.querySelector("#root")).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
<React.StrictMode>
<Provider store={store}>
<RouterProvider router={router} />
</Provider>
</React.StrictMode>
);

31
src/ts/emailSlice.ts Normal file
View File

@ -0,0 +1,31 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import type { RootState } from '@ts/store'
// Define a type for the slice state
interface EmailState {
value: string
}
// Define the initial state using that type
const initialState: EmailState = {
value: "",
}
export const emailSlice = createSlice({
name: 'email',
// `createSlice` will infer the state type from the `initialState` argument
initialState,
reducers: {
// Use the PayloadAction type to declare the contents of `action.payload`
set: (state, action: PayloadAction<string>) => {
state.value = action.payload
},
},
})
export const { set } = emailSlice.actions
// Other code such as selectors can use the imported `RootState` type
export const selectEmail = (state: RootState) => state.email.value
export default emailSlice.reducer

6
src/ts/hooks.ts Normal file
View File

@ -0,0 +1,6 @@
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from '@ts/store'
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

13
src/ts/store.ts Normal file
View File

@ -0,0 +1,13 @@
import { configureStore } from '@reduxjs/toolkit'
import emailReducer from '@ts/emailSlice';
export const store = configureStore({
reducer: {
email: emailReducer
},
})
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

View File

@ -13,6 +13,7 @@
"@components": ["components"],
"@components/*": ["components/*"],
"@scss/*": ["scss/*"],
"@ts/*": ["ts/*"],
}
}
}

View File

@ -57,7 +57,7 @@ module.exports = (env, argv) => {
]
},
resolve: {
extensions: [".tsx", ".jsx", ".js"],
extensions: [".tsx", ".ts", ".jsx", ".js"],
alias: {
"@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"),
},