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