@romr1ch/use-memo-action v0.2.0

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

Опция

useMemoAction

Опции

Возвращает

UseMemoActionOptions