first commit

lib/features/people/personSlice.ts

@@ -0,0 +1,64 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+import { Result } from "@/app/people/person";
+
+const url = "https://randomuser.me/api/?results=12";
+
+const initialState = {
+  results: [],
+  isLoading: true,
+} as any;
+
+export const fetchRandomUsers = createAsyncThunk(
+  "people/getRandomUsers",
+  async (name, thunkApi) => {
+    try {
+      const response = await axios.get(url);
+      return response.data.results;
+    } catch (error: any) {
+      if (error.isAxiosError) {
+        console.log(error.response);
+        return thunkApi.rejectWithValue(error.response);
+      } else {
+        console.log(error);
+      }
+    }
+  },
+);
+
+const personSlice = createSlice({
+  name: "people",
+  initialState,
+  reducers: {
+    clearList: (state) => {
+      state.results = [];
+    },
+    removeUser: (state, action) => {
+      const uuid = action.payload;
+      state.results = state.results.filter(
+        (user: Result) => user.login.uuid !== uuid,
+      );
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchRandomUsers.pending, (state) => {
+      state.isLoading = true;
+    });
+    builder.addCase(fetchRandomUsers.fulfilled, (state, action) => {
+      console.log(state);
+      console.log(action.payload);
+      state.results = action.payload;
+      state.isLoading = false;
+      console.log(state.results.length);
+    });
+    builder.addCase(fetchRandomUsers.rejected, (state) => {
+      state.isLoading = false;
+    });
+  },
+});
+
+console.log(personSlice);
+
+export const { clearList, removeUser } = personSlice.actions;
+
+export default personSlice.reducer;

lib/hooks.ts

@@ -0,0 +1,7 @@
+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/people/personSlice";
+import personReducer from "./features/people/personSlice";
+
+export const makeStore = () => {
+  return configureStore({
+    reducer: { people: personReducer },
+  });
+};
+
+// 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"];