feat: apislice

package.json

@@ -43,7 +43,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.1",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.24.1",
     "@babel/preset-react": "^7.24.1",
     "@testing-library/react": "^14.2.1",

src/app/store.js

@@ -0,0 +1,13 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { apiSlice } from "./api/apiSlice";
+import { setupListeners } from "@reduxjs/toolkit/query";
+
+export const store = configureStore({
+    reducer: {
+        [apiSlice.reducerPath]: apiSlice.reducer,
+    },
+    middleware: getDefaultMiddleware => getDefaultMiddleware().concat(apiSlice.middleware),
+    devTools: false
+})
+
+setupListeners(store.dispatch);

src/features/todos/TodoList.js

@@ -2,10 +2,19 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTrash, faUpload } from '@fortawesome/free-solid-svg-icons'
 import { useState } from 'react'
+import { useGetTodosQuery } from '../../app/api/apiSlice'
 
 const TodoList = () => {
     const [ newTodo, setNewTodo ] = useState('')
 
+    const {
+        data: todos,
+        isLoading,
+        isSuccess,
+        isError,
+        error
+    } = useGetTodosQuery()
+
     const handleSubmit = (e)=> {
         e.preventDefault()
         //addTodo
@@ -30,6 +39,13 @@ const TodoList = () => {
     </form>
 
     let content;
+    if (isLoading) {
+        content = <p>Loading ...</p>
+    } else if (isSuccess){
+        content = JSON.stringify(todos)
+    } else if (isError) {
+        content = <p>{error.message || 'Error fetching todos'}</p>
+    }
 
   return (
     <main>

src/index.js

@@ -1,16 +1,16 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
-import { ApiProvider } from '@reduxjs/toolkit/dist/query/react';
-import { apiSlice } from './features/api/apiSlice';
+import { Provider } from 'react-redux';
+import { store } from './app/store';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <ApiProvider api={apiSlice}>
+    <Provider store={store}> 
       <App />
-    </ApiProvider>
+    </Provider>
   </React.StrictMode>
 );

src/setupTests.js

@@ -1,5 +1 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';