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, если это ещё не сделано.

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))
)

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

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 | - | Второй аргумент принимает объект, в котором необходимо передать ключ с уникальным значением ({ 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 | Устанавливает время, нахождении в кэше для конкретного экшена. Значение можно установить глобально для всех хуков в приложении. |