worker-fetch-looper

``bash
yarn add worker-fetch-looper
`

Usage samples

$3

`js
import React, { useState, useEffect, useRef } from 'react';
import { useFetchLooper } from 'worker-fetch-looper';

const App = () => {
// NOTE: No effect if no changes in dynamic state!
const { state } = useFetchLooper({
timeout: 1000,
runnerAction: {
type: 'YOUR_CODE',
payload: {
url: 'https://jsonplaceholder.typicode.com/todos/1',
method: 'GET'
}
}
});

return (


        {JSON.stringify(state, null, 2)}
      

`js
import React, { useState, useEffect, useRef } from 'react';
import { useFetchLooper, TRes } from 'worker-fetch-looper';

enum ACTION_CODE {
One = 'ACTION_CODE_1'
}

const App = () => {
const [counter, setCounter] = useState(1)
const [errCounter, setErrCounter] = useState(0)
const timeout = useRef()
useEffect(() => {
timeout.current = setTimeout(() => { setCounter((c) => c + 1) }, 5000)
return () => {
if (!!timeout.current) clearTimeout(timeout.current)
}
}, [counter])

const { state } = useFetchLooper({
intialState: { // NOTE: Optional (null by default)
userId: 0,
id: 0,
title: "default value",
completed: false
},
timeout: 1000,
runnerAction: {
type: 'ACTION_CODE_1',
payload: {
url: https://jsonplaceholder.typicode.com/todos/${counter},
method: 'GET',
// body: {},
}
},
validate: {
// NOTE: Request will not be sent if false (Worker runner will not be started)
beforeRequest: ({ type, payload }: { type: string, payload: any }) =>
// !!payload.body.dynamic_field // Validate body
!document.hidden, // Browser tab is active
response: ({ res, type }: { res: TRes, type: string }) => {
// console.log(res)
return true
}
},
cb: {
onUpdateState: ({ res, type }: { res: TRes, type: string }) => {
console.log(- state effect: new state! type: ${type})
try {
switch (type) {
case ACTION_CODE.One:
// NOTE: Updates from Web Worker detected as effect!
console.log(res) // Response by server
break;
default:
console.log(res.id)
break;
}
} catch (err) {
console.log(err)
}
},
// NOTE: But only for update state effect and !!validate?.response fuckup!
// Not for each response.
onCatch: ({ err, res, type }) => {
console.log(err)
setErrCounter((c) => c + 1)
},
// NOTE: But only for update state effect and !!validate?.response success!
// Not for each response.
onSuccess: ({ res, type }: { res: TRes, type: string }) => {
console.table({ res: JSON.stringify(res), type })
},
},
})

return (


{JSON.stringify({ state, errCounter }, null, 2)}

/* OUTPUT SAMPLE:
{
"state": {
"userId": 1,
"id": 15,
"title": "ab voluptatum amet voluptas",
"completed": true
},
"errCounter": 0
}
*/
`

Based on react-hooks-typescript-npm-starter

![NPM version](https://www.npmjs.com/package/react-hooks-typescript-npm-starter)
![NPM downloads](https://www.npmjs.com/package/react-hooks-typescript-npm-starter)
![NPM license](https://www.npmjs.com/package/react-hooks-typescript-npm-starter)
![Codecov](https://codecov.io/gh/the-mes/react-hooks-typescript-npm-starter)
![Travis](https://travis-ci.com/the-mes/react-hooks-typescript-npm-starter)
![Bundle size](https://bundlephobia.com/result?p=react-hooks-typescript-npm-starter)

About

Short description about library

$3

- Live – check website
- Playground – play with library in Storybook

$3

- example by John Doe
- example-2 by Jane Doe

How to Install

First, install the library in your project by npm:

`sh
npm install react-hooks-typescript-npm-starter
`

Or Yarn:

`sh
yarn add react-hooks-typescript-npm-starter
`

Getting Started

• Import hook in React application file:

`js
import { useMyHook } from 'react-hooks-typescript-npm-starter';
`

#### Returned Values

Example

`js
const { sum } = useMyHook();

const result = sum(2, 3); // 5
``

License

This project is licensed under the MIT License © 2021-present Jakub Biesiada