add redux setup and typescript configuration
Change-Id: Ibe00e3e969d539d3898e412a0093ee2076bec857
diff --git a/client/redux/appSlice.ts b/client/redux/appSlice.ts
new file mode 100644
index 0000000..f0fc628
--- /dev/null
+++ b/client/redux/appSlice.ts
@@ -0,0 +1,37 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import type { RootState } from "./store";
+
+// Define a type for the slice state
+interface appState {
+ value: number;
+}
+
+// Define the initial state using that type
+const initialState: appState = {
+ value: 0,
+};
+
+export const appSlice = createSlice({
+ name: "app",
+ // `createSlice` will infer the state type from the `initialState` argument
+ initialState,
+ reducers: {
+ increment: (state) => {
+ state.value += 1;
+ },
+ decrement: (state) => {
+ state.value -= 1;
+ },
+ // Use the PayloadAction type to declare the contents of `action.payload`
+ incrementByAmount: (state, action: PayloadAction<number>) => {
+ state.value += action.payload;
+ },
+ },
+});
+
+export const { increment, decrement, incrementByAmount } = appSlice.actions;
+
+// Other code such as selectors can use the imported `RootState` type
+export const selectCount = (state: RootState) => state.app.value;
+
+export default appSlice.reducer;
diff --git a/client/redux/hooks.ts b/client/redux/hooks.ts
new file mode 100644
index 0000000..6875ea7
--- /dev/null
+++ b/client/redux/hooks.ts
@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } 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;
diff --git a/client/redux/store.ts b/client/redux/store.ts
new file mode 100644
index 0000000..d28f3d0
--- /dev/null
+++ b/client/redux/store.ts
@@ -0,0 +1,13 @@
+import { configureStore } from "@reduxjs/toolkit";
+import appReducer from "./appSlice";
+
+export const store = configureStore({
+ reducer: {
+ app: appReducer,
+ },
+});
+
+// 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;