# use-atom-reducer

> helper to use react reducer function with a recoil atom

Latest version **1.0.4** (published 2021-02-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install use-atom-reducer
pnpm add use-atom-reducer
yarn add use-atom-reducer
bun add use-atom-reducer
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2021-02-11 |
| First published | 2021-02-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 2.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | nxml |
| Maintainers | nxml |
| Keywords | recoil, reducer, state, management, atom, selector |

## Links

- npm: https://www.npmjs.com/package/use-atom-reducer
- Repository: https://github.com/nxml/use-atom-reducer
- Homepage: https://github.com/nxml/use-atom-reducer#readme
- Issues: https://github.com/nxml/use-atom-reducer/issues
- npm.io page: https://npm.io/package/use-atom-reducer

## Dependencies (1)

- [recoil](https://npm.io/package/recoil.md) ^0.1.2

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 1.0.4 (latest) — 2021-02-11
- 1.0.3 — 2021-02-09
- 1.0.2 — 2021-02-09
- 1.0.1 — 2021-02-09
- 1.0.0 — 2021-02-09

## README

# use-atom-reducer 
## Example
``` javascript
import React from "react"
import {atom} from "recoil"
import {useAtomReducer} from "use-atom-reducer"


export const counterState = atom({
    key: 'counter', // unique ID (with respect to other atoms/selectors)
    default: 0, // default value (aka initial value)
  });



export default function Counter() {
    
    const reducer = (state,action)=>{
        if(action.type=="incr"){
            return state + action.payload
        }
        if(action.type=="decr"){
            return state - action.payload
        }

    }


    const [count,dispatch] = useAtomReducer(counterState,reducer)
    const handleIncr =()=>{
        dispatch({type:"incr",payload:1})
    }
     const handleDecr =()=>{
        dispatch({type:"decr",payload:1})
    }


    return <div>
        {count}
        <button onClick= {handleIncr}> INCREMENT  </button>
        <button onClick= {handleDecr}> DECREMENT  </button>
    </div>

}


```

# App
```javascript

import Counter from "./Counter"
import { RecoilRoot } from "recoil"


function App() {
  return (
    <div className="App">
     
        <RecoilRoot>
          <Counter></Counter>
          <Counter></Counter>
        </RecoilRoot>

    </div>
  );
}



```

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