# react-async-saga-reducer

> Use redux saga with useReducer hook to handle side effects without Redux

Latest version **1.0.2** (published 2020-06-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-async-saga-reducer
pnpm add react-async-saga-reducer
yarn add react-async-saga-reducer
bun add react-async-saga-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.2 |
| Published | 2020-06-02 |
| First published | 2020-05-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Ashish Rudra |
| Maintainers | ashishrudra |
| Keywords | react, react-hooks, custom-hooks, react-custom-hooks, react-async-hook, async-reducer, react-reducer, useReducer-hook, useReducer, redux-saga, redux-saga-hook, redux-saga-reducer, saga-reducer, async-reducer, react-async-saga-reducer, async-saga-reducer, use-saga-reducer, use-async-saga-reducer |

## Links

- npm: https://www.npmjs.com/package/react-async-saga-reducer
- Repository: https://github.com/ashishrudra/react-async-saga-reducer
- Homepage: https://github.com/ashishrudra/react-async-saga-reducer#readme
- Issues: https://github.com/ashishrudra/react-async-saga-reducer/issues
- npm.io page: https://npm.io/package/react-async-saga-reducer

## Dependencies (2)

- [react](https://npm.io/package/react.md) 16.13.1
- [redux-saga](https://npm.io/package/redux-saga.md) 1.1.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2020-06-02
- 1.0.1 — 2020-05-16
- 1.0.0 — 2020-05-15

## README

# react-async-saga-reducer
Use redux saga with React useReducer hook to handle side effects without Redux

### install
` npm i react-async-saga-reducer `

### dependencies
    1. React
    2. Redux-Saga

### usage
[DEMO](https://codesandbox.io/s/react-async-saga-reducer-gitch)

saga.js
```javascript
import { put, takeEvery, delay } from 'redux-saga/effects';

function* sagaWorker() {
    let countDown = 5;
    while(countDown > 0) {
        yield put({type: 'UPDATE_TIMER', value: countDown});
        yield delay(1000);
        countDown -= 1;
    }
    yield put({type: 'INCREMENT'});
}

export function* mySaga() {
    yield takeEvery('ASYNC_INCREMENT', sagaWorker);
}
```

reducer.js

```javascript
export function myReducer(state, action) {
    switch(action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 , timer: 0 }
        case 'UPDATE_TIMER':
            return { count: state.count, timer: action.value }
        default:
            return state
    }
}
```

app.js
```javascript
import React from 'react';
import { useAsyncSagaReducer } from 'react-async-saga-reducer';
import { myReducer } from './reducer';
import { mySaga } from './saga';

const initialState = { count: 0 , timer: 0 };

export function App() {
    const [ state, dispatch ] = useAsyncSagaReducer(myReducer, mySaga, initialState);

    return (
        <div className="App">
            <p>Count: {state.count}</p>
            <br/>
            <button onClick={() => dispatch({type: 'ASYNC_INCREMENT'})} disabled={state.timer > 0}>Increment after 5 second</button>
            {state.timer > 0 && <p>...please wait {state.timer} sec...</p>}
        </div>
    );
}
```

### TypeScript
Type annotations may be specified when calling useAsyncSagaReducer:

saga.ts
```javascript
import { put, takeEvery, delay } from 'redux-saga/effects';

function* sagaWorker() {
    let countDown = 5;
    while(countDown > 0) {
        yield put({type: 'UPDATE_TIMER', value: countDown});
        yield delay(1000);
        countDown -= 1;
    }
    yield put({type: 'INCREMENT'});
}

export function* mySaga() {
    yield takeEvery('ASYNC_INCREMENT', sagaWorker);
}
```
action.ts
```javascript
export interface Action<T> {
    type: string;
    value?: T
}
```

state.ts
```javascript
export interface StateInterface {
    count: number;
    timer: number;
}

export const initialState = (): StateInterface => {
    return {
        count: 0,
        timer: 0
    };
}
```

reducer.ts
```javascript
import { StateInterface, initialState } from './state';
import { Action } from './action';

export function myReducer(state: StateInterface, action: Action<number>): StateInterface {
    switch(action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 , timer: 0 }
        case 'UPDATE_TIMER':
            return { count: state.count, timer: action.value }
        default:
            return state
    }
}
```

app.tsx
```javascript
import * as React from 'react';
import { useAsyncSagaReducer } from 'react-async-saga-reducer';
import { myReducer } from './reducer';
import { mySaga } from './saga';
import { StateInterface, initialState } from './state';
import { Action } from './action';

export function App() {
    //specify types to gain intelligent code completion and TypeScript type checking.
    const [ state, dispatch ] = useAsyncSagaReducer<StateInterface, Action<number>>(myReducer, mySaga, initialState());

    return (
        <div className="App">
            <p>Count: {state.count}</p>
            <br/>
            <button onClick={() => dispatch({type: 'ASYNC_INCREMENT'})} disabled={state.timer > 0}>Increment after 5 second</button>
            {state.timer > 0 && <p>...please wait {state.timer} sec...</p>}
        </div>
    );
}
```

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