This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import ReactQueryWay from './components/ReactQueryWay'; | |
import { QueryClient, QueryClientProvider } from 'react-query'; | |
const queryClient = new QueryClient(); | |
const App = () => { | |
return ( | |
<> | |
<QueryClientProvider client={queryClient}> | |
<ReactQueryWay /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const getTodos = () => { | |
return fetch('https://jsonplaceholder.typicode.com/todos').then((res) => | |
res.json() | |
); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useGetTodosQuery } from '../services/todo'; | |
const ReduxWay = () => { | |
const { data, error, isLoading } = useGetTodosQuery(); | |
return ( | |
<div> | |
<h1>Redux Way</h1> | |
{error ? ( | |
<>Oh no, there was an error</> | |
) : isLoading ? ( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import { Provider } from 'react-redux'; | |
import { store } from './store'; | |
import App from './App'; | |
ReactDOM.render( | |
<Provider store={store}> | |
<App /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { configureStore } from '@reduxjs/toolkit'; | |
import { todoApi } from './services/todo'; | |
export const store = configureStore({ | |
reducer: { | |
[todoApi.reducerPath]: todoApi.reducer, | |
}, | |
middleware: (getDefaultMiddleware) => | |
getDefaultMiddleware().concat(todoApi.middleware), | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; | |
export const todoApi = createApi({ | |
reducerPath: 'todoApi', | |
baseQuery: fetchBaseQuery({ | |
baseUrl: 'https://jsonplaceholder.typicode.com/', | |
}), | |
endpoints: (builder) => ({ | |
getTodos: builder.query({ | |
query: () => 'todos', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useEffect, useState } from 'react'; | |
const ReactWay = () => { | |
const [apiData, setApiData] = useState([]); | |
const [isLoading, setIsLoading] = useState(false); | |
const [error, setError] = useState(''); | |
useEffect(() => { | |
const fetchData = async () => { | |
setIsLoading(true); | |
const response = await fetch( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const express = require('express') \\ You'll have to install it by running npm i express in the command prompt | |
const app = express() | |
const port = 3000 | |
app.get('/', (req, res) => res.send('<html><body>Demonstration Input Field <hr> <input value="' + req.query.name + '"></body></html>')) | |
app.listen(port, () => console.log(`Sample App listening at http://localhost:${port}`)) |
NewerOlder