add redux

package.json

@@ -10,8 +10,13 @@
  "preview": "vite preview"
  },
  "dependencies": {
+ "@reduxjs/toolkit": "^2.2.2",
+ "axios": "^1.6.8",
+ "modern-normalize": "^2.0.0",
  "react": "^18.2.0",
- "react-dom": "^18.2.0"
+ "react-dom": "^18.2.0",
+ "react-redux": "^9.1.0",
+ "styled-components": "^6.1.8"
  },
  "devDependencies": {
  "@types/react": "^18.2.66",

src/App.jsx

@@ -1,10 +1,18 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { useEffect, useState } from "react";
+import reactLogo from "./assets/react.svg";
+import viteLogo from "/vite.svg";
+import "./App.css";
+import { useDispatch } from "react-redux";
+import { fetchCars } from "./redux/cars/operations";
+// import { selectCars } from "./redux/cars/carsSelectors";
 
 function App() {
- const [count, setCount] = useState(0)
+ const [count, setCount] = useState(0);
+ const dispatch = useDispatch();
+ // const cars = useSelector(selectCars);
+ useEffect(() => {
+ dispatch(fetchCars());
+ }, [dispatch]);
 
  return (
  <>
@@ -29,7 +37,7 @@ function App() {
  Click on the Vite and React logos to learn more
  </p>
  </>
- )
+ );
 }
 
-export default App
+export default App;

src/main.jsx

@@ -1,10 +1,14 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+import { store } from "./redux/store.js";
+import { Provider } from "react-redux";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
- <App />
- </React.StrictMode>,
-)
+ <Provider store={store}>
+ <App />
+ </Provider>
+ </React.StrictMode>
+);

src/redux/cars/carsSelectors.js

@@ -0,0 +1 @@
+export const selectCars = (state) => state.cars.cars;

src/redux/cars/carsSlice.js

@@ -0,0 +1,19 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { fetchCars } from "./operations";
+
+const carsSlice = createSlice({
+ name: "contacts",
+ initialState: {
+ cars: [],
+ isLoading: false,
+ error: null,
+ },
+ reducers: {},
+ extraReducers: (builder) => {
+ builder.addCase(fetchCars.fulfilled, (state, action) => {
+ state.cars = action.payload;
+ });
+ },
+});
+
+export const carsReducer = carsSlice.reducer;

src/redux/cars/operations.js

@@ -0,0 +1,17 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+
+axios.defaults.baseURL = "https://6571b270d61ba6fcc0134cff.mockapi.io";
+
+export const fetchCars = createAsyncThunk(
+ "cars/fetchAll",
+ async (_, thunkAPI) => {
+ try {
+ const response = await axios.get("/phonebook/cars");
+
+ return response.data;
+ } catch (e) {
+ return thunkAPI.rejectWithValue(e.message);
+ }
+ }
+);

src/redux/store.js

@@ -0,0 +1,8 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { carsReducer } from "./cars/carsSlice";
+
+export const store = configureStore({
+ reducer: {
+ cars: carsReducer,
+ },
+});