first commit

lib/features/bookSlice.ts

@@ -0,0 +1,34 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { data } from "../../app/data";
+import type { VolumeItem } from "../../app/data";
+
+// 1. Define the State interface
+export interface State {
+  books: VolumeItem[];
+}
+
+const initialState: State = {
+  books: []
+} as any;
+
+const bookSlice = createSlice({
+  name: "books",
+  initialState,
+  reducers: {
+    clearList: (state: State) => {
+      state.books = [];
+    },
+    resetList: (state) => {
+      state.books = data.items;
+    },
+    deleteBook: (state, action) => {
+      const id = action.payload;
+      state.books = state.books.filter((book: VolumeItem) => book.id !== id);
+    }
+  },
+  extraReducers: (buider) => {}
+});
+
+export const { clearList, resetList, deleteBook } = bookSlice.actions;
+
+export default bookSlice.reducer;

lib/hooks.ts

@@ -0,0 +1,9 @@
+"use client";
+
+import { useDispatch, useSelector, useStore } from "react-redux";
+import type { RootState, AppDispatch, AppStore } from "./store";
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();
+export const useAppStore = useStore.withTypes<AppStore>();

lib/store.ts

@@ -0,0 +1,15 @@
+import { configureStore } from "@reduxjs/toolkit";
+import "@/lib/features/bookSlice";
+import bookReducer from "./features/bookSlice";
+
+export const makeStore = () => {
+  return configureStore({
+    reducer: { books: bookReducer },
+  });
+};
+
+// Infer the type of makeStore
+export type AppStore = ReturnType<typeof makeStore>;
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<AppStore["getState"]>;
+export type AppDispatch = AppStore["dispatch"];