# @romr1ch/use-memo-action

> React hook for action redux memoization.

Latest version **0.2.0** (published 2022-08-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @romr1ch/use-memo-action
pnpm add @romr1ch/use-memo-action
yarn add @romr1ch/use-memo-action
bun add @romr1ch/use-memo-action
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2022-08-22 |
| First published | 2022-08-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 40.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Klyshnikov Roman |
| Maintainers | romrich |
| Keywords | hook, hooks, redux-memo-action, typescript |

## Links

- npm: https://www.npmjs.com/package/@romr1ch/use-memo-action
- Repository: https://github.com/Romr1ch/use-memo-action
- Homepage: https://github.com/Romr1ch/use-memo-action#readme
- Issues: https://github.com/Romr1ch/use-memo-action/issues
- npm.io page: https://npm.io/package/@romr1ch/use-memo-action

## Dependencies (3)

- [is-promise](https://npm.io/package/is-promise.md) ^4.0.0
- [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2022-08-22
- 0.1.0 — 2022-08-22
- 0.0.3 — 2022-08-19
- 0.0.2 — 2022-08-19
- 0.0.1 — 2022-08-19

## README

# use-memo-action

React hook for action redux memoization.

## Установка

```
npm i @romr1ch/use-memo-action
```

## Пример использования

### Подключение `middlewares` и `reducer`.

> **Важно!** Мидлвара `throttleActionsMiddleware` работает вместе с `enchantAsyncActionsMiddleware`.
> Установите `npm i redux-enchant-async-actions`, если это ещё не сделано.

```typescript jsx
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { composeWithDevTools } from '@redux-devtools/extension'
import { memoReducer, throttleActionsMiddleware } from '@romr1ch/use-memo-action'
import enchantAsyncActionsMiddleware from 'redux-enchant-async-actions'

const rootReducer = combineReducers({
  // `memo` — обязательное название
  memo: memoReducer,
})

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(throttleActionsMiddleware(), enchantAsyncActionsMiddleware))
)
```

### Использование

```typescript jsx
import React from 'react'
import { Provider } from 'react-redux'
import { createAction } from 'redux-actions'

interface Data {
  userId: number
  id: number
  title: string
  completed: boolean
}

type GetTodoPayload = ({ id }: { id: number }) => Promise<Data>

const getTodo = createAction<GetTodoPayload>('GET_TODO', () => {
  return async ({ id = 1 }) => {
    const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)

    return await response.json()
  }
})

export function ComponentA() {
  const { data, error, status, meta } = useMemoAction(getTodo, { key: 'todo' })

  return <h1>ComponentA</h1>
}

export function ComponentB() {
  useMemoAction(getTodo, { key: 'todo' }, { id: 1 })

  return <h1>ComponentB</h1>
}

export function ComponentC() {
  useMemoAction(getTodo, { key: 'todo' })

  return <h1>ComponentC</h1>
}

function App() {
  return (
    <Provider store={store}>
      <ComponentA />
      <ComponentB />
      <ComponentC />
    </Provider>
  )
}
```

## throttleActionsMiddleware

### Опция

| Аргумент | Тип    | По умолчанию | Описание                                                                                                            |
| -------- | ------ | ------------ | ------------------------------------------------------------------------------------------------------------------- |
| time     | number | 60           | Устанавливается значение в **милисикундах**. Одни и те же экшены не будут отрабатывать за этот промержуток времени. |

## useMemoAction

### Опции

| Аргумент  | Тип                                           | По умолчанию | Описание                                                                                                                                                                                   |
| --------- | --------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| action\*  | UseMemoActionAction                           | -            | Может передаваться либо функцией, либо объектом, у которого `payload` должен возвращать функцию, которая ничего не принимает и возвращает `Promise`. Здесь можно делать запросы к серверу. |
| options\* | [UseMemoActionOptions](#UseMemoActionOptions) | -            | Второй аргумент принимает объект, в котором необходимо передать ключ с уникальным значением (`{ key: 'unic-value' }`).                                                                     |
| args      | { [key: string]: any }                        | {}           | Аргументы, которые хук передаст в возвращаемую функцию в экшене.                                                                                                                           |

### Возвращает

| Аргумент | Тип                   | По умолчанию | Описание                                                                   |
| -------- | --------------------- | ------------ | -------------------------------------------------------------------------- |
| data     | any                   | undefined    | Результат экшена, если будет установлена ошибка, то `undefined`.           |
| error    | string или false      | false        | Текст ошибки или `false`, если её нет.                                     |
| status   | boolean               | -            | Зависит от `error`.                                                        |
| meta     | { storePath: string } | -            | Единственным свойством является `storePath` — путь для данных к хранилищу. |

## UseMemoActionOptions

| Свойство | Тип    | По умолчанию | Описание                                                                                                                                                      |
| -------- | ------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| key\*    | string | -            | Уникальное значение, под котором будут храниться данные в хранилище.                                                                                          |
| ttl      | number | 60           | Устанавливает время, нахождении в кэше для конкретного экшена. Значение можно установить [глобально](#throttleActionsMiddleware) для всех хуков в приложении. |

---
_Source: https://npm.io/package/@romr1ch/use-memo-action · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._