https://github.com/pret-a-porter/use-enhanced-reducer

🤖Simple custom hook for use React.useReducer with middlewares.
https://github.com/pret-a-porter/use-enhanced-reducer

react react-hooks redux redux-middleware

Last synced: 22 days ago
JSON representation

🤖Simple custom hook for use React.useReducer with middlewares.

• Host: GitHub
• URL: https://github.com/pret-a-porter/use-enhanced-reducer
• Owner: pret-a-porter
• Created: 2019-02-28T17:21:59.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-07-17T15:28:42.000Z (over 4 years ago)
• Last Synced: 2024-10-10T14:51:42.829Z (29 days ago)
• Topics: react, react-hooks, redux, redux-middleware
• Language: TypeScript
• Homepage:
• Size: 342 KB
• Stars: 11
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# use-enhanced-reducer

[![npm version](https://badgen.net/npm/v/use-enhanced-reducer?icon=npm)](https://www.npmjs.com/package/use-enhanced-reducer)

[![npm downloads](https://badgen.net/npm/dt/use-enhanced-reducer?icon=libraries&color=green)](https://www.npmjs.com/package/use-enhanced-reducer)

[![bundle size](https://badgen.net/bundlephobia/minzip/use-enhanced-reducer@latest?icon=awesome)](https://bundlephobia.com/result?p=use-enhanced-reducer@latest)

Simple custom hook for use React.useReducer with middlewares.

# Examples

### With logger middleware

```ts

import * as React from 'react';

import { useEnhancedReducer, loggerMiddleware } from 'use-enhanced-reducer';

const SomeComponent: React.FunctionComponent<{}> = () => {

	// see logs of actions in console

	const [state, dispatch] = useEnhancedReducer(reducer, initialState, [loggerMiddleware])

	// do something

}

```

### With your custom middleware

```ts

import * as React from 'react';

import { useEnhancedReducer, TReducerMiddleware } from 'use-enhanced-reducer';

const customMiddleware: TReducerMiddleware = state => dispatch => action => {

	// do something

};

const SomeComponent: React.FunctionComponent<{}> = () => {

	const [state, dispatch] = useEnhancedReducer(reducer, initialState, [customMiddleware])

	// do something

}

```