# react-redux-request-controller

> Данная библиотека берет на себя совершение запросов на бэк. Записывает в ```store``` состояние запросов, которые грузятся или провалились. Предоставляет хуки: ```useIsLoading``` и ```useIsError```. Предоставляет хук: ```useDataSelector```, который авто

Latest version **1.0.3** (published 2022-05-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-redux-request-controller
pnpm add react-redux-request-controller
yarn add react-redux-request-controller
bun add react-redux-request-controller
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-05-30 |
| First published | 2022-05-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | alex_kali |

## Links

- npm: https://www.npmjs.com/package/react-redux-request-controller
- npm.io page: https://npm.io/package/react-redux-request-controller

## Recent versions

- 1.0.3 (latest) — 2022-05-30
- 1.0.2 — 2022-05-30
- 1.0.1 — 2022-05-30
- 1.0.0 — 2022-05-30

## README

## react-redux-request-controller
### Описание
Данная библиотека берет на себя совершение запросов на бэк. Записывает в ```store``` состояние запросов, которые грузятся или провалились. 
Предоставляет хуки: ```useIsLoading``` и ```useIsError```.
Предоставляет хук: ```useDataSelector```, который автоматически берет данные.
### Подключение
Чтобы подключить библиотеку, необходимо модифицировать ваш store:
1) Подключить ```formControllerReducer```
```ts
import {requestControllerReducer} from "react-redux-request-controller";

const combinedReducer = combineReducers({
  requestController: requestControllerReducer, // подключение requestControllerReducer
  user: userReducer,
  contact: contactReducer,
});
```
2) Записать функцию ```getState``` в window
```ts
window.getState = () => store.getState()
```

3) rootUrl берется из ```process.env.REACT_APP_SERVER_API_URL```, поэтому, скрипт для запуска приложения, должен выглядеть как-то так:
```js
   "start-develop": "PORT=3000 REACT_APP_SERVER_API_URL=http://11.111.111.1111:8000 react-scripts start",
```

4) Авторизационный токен должен храниться в ```window.token```
### Документация

1) ```requestController```
Полагаю, имеет смысл вставить интерфейс.
```ts
interface IRequestController {
  onSuccess?: (data: any) => void;
  onFailed?: (errors: any | undefined) => void;
  serialize?: (data: any) => void;

  method: "POST" | "GET" | "DELETE" | "PUT";
  id: string;
  action: any;
  url: string;
  params?: object;
}
```
```onFailed``` - в случае, если запрос окончился ошибкой, вызовется без параметров. 
Если статус ответа - 400, вызовется с данными, которые пришли с бэка. <br>
```serializer``` - необходим, если вы хотите поменять структуру данных, которые пришли с бэка.
```id``` - уникальный идентификатор запроса. Если запрос на удаление или на обновление, 
имеет смысл, ```id``` записывать как-то так: ```updateItem24```, где 24 это id обновляемого компонента.
2) ```useIsLoading``` && ```useIsError```<br>
Принимают всего 1 параметр: id запроса. 
3) ```getIsLoading``` && ```getIsError```<br>
Также принимают всего 1 параметр: id запроса.
4) ```useDataSelector```<br>
Принимает 3 параметра: selector, isLoading(функция, которая возвращает boolean), getDefaultFunction(функция, для взятия данных, которая оборачивается в dispatch).
###Конечный код
```ts
import {RootState, store} from "../store";
import {useDataSelector} from "../../utils/phoenix/useData";
import {createContact, deleteContactData, getContactData, updateContactData} from "./thunks";
import {IUser} from "../user/model";
import {getIsError, getIsLoading, useIsError, useIsLoading} from "react-redux-request-controller";

export const Contact = {
  useData: () => useDataSelector(
    (state: RootState) => state.contact.contact,
    Contact.object.getIsLoading,
    getContactData
  ) as Array<IContact> | null,

  useIsLoading: () => useIsLoading('getContactData'),
  useIsError: () => useIsError('getContactData'),
  object: {
    getData: () => store.getState().contact.contact as Array<IContact> | null,
    getIsLoading: () => getIsLoading('getContactData'),
    getIsError: () => getIsError('getContactData'),
  },
  options: {
    create: (data:ICreateContact) => window.dispatch(createContact(data)),
    update: (data:IUpdateContact) => window.dispatch(updateContactData(data)),
    delete: (data:IDeleteContact) => window.dispatch(deleteContactData(data)),
  }
}

export interface IContact {
  id: string | number;
  phone: string;
  name: string;

  user?: IUser;
}

//****************** Options interface ******************//

export interface ICreateContact {
  phone: string;
  name: string;
}

export interface IUpdateContact {
  id?: string | number;
  phone: string;
  name: string;
}

export interface IDeleteContact {
  id: string | number;
}
```

Эта библиотека создана, чтобы создавать ```model.ts```. 
В данном файле почти нет логики. 
Это лишь удобный интерфейс, с очень удобным синтаксисом, для взаимодействия с моделью ```Contact```.
Я считаю, что данный подход лучше, чем рандомно раскиданные экшены и селекторы.
Да и код 
```ts
const userData = User.useData()
```
Куда более чистый и лаконичный, чем

```ts
const userData = useSelector(userDataSelector)
```
или
```ts
User.options.login(data)
```
лучше, чем
```ts
const dispatch = useDispatch()
dispatch(userLogin(data))
```

---
_Source: https://npm.io/package/react-redux-request-controller · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._