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;