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

saga.js

1import { put, takeEvery, delay } from 'redux-saga/effects';
2
3function* sagaWorker() {
4    let countDown = 5;
5    while(countDown > 0) {
6        yield put({type: 'UPDATE_TIMER', value: countDown});
7        yield delay(1000);
8        countDown -= 1;
9    }
10    yield put({type: 'INCREMENT'});
11}
12
13export function* mySaga() {
14    yield takeEvery('ASYNC_INCREMENT', sagaWorker);
15}

reducer.js

1export function myReducer(state, action) {
2    switch(action.type) {
3        case 'INCREMENT':
4            return { count: state.count + 1 , timer: 0 }
5        case 'UPDATE_TIMER':
6            return { count: state.count, timer: action.value }
7        default:
8            return state
9    }
10}

app.js

1import React from 'react';
2import { useAsyncSagaReducer } from 'react-async-saga-reducer';
3import { myReducer } from './reducer';
4import { mySaga } from './saga';
5
6const initialState = { count: 0 , timer: 0 };
7
8export function App() {
9    const [ state, dispatch ] = useAsyncSagaReducer(myReducer, mySaga, initialState);
10
11    return (
12        <div className="App">
13            <p>Count: {state.count}</p>
14            <br/>
15            <button onClick={() => dispatch({type: 'ASYNC_INCREMENT'})} disabled={state.timer > 0}>Increment after 5 second</button>
16            {state.timer > 0 && <p>...please wait {state.timer} sec...</p>}
17        </div>
18    );
19}

TypeScript

Type annotations may be specified when calling useAsyncSagaReducer:

saga.ts

1import { put, takeEvery, delay } from 'redux-saga/effects';
2
3function* sagaWorker() {
4    let countDown = 5;
5    while(countDown > 0) {
6        yield put({type: 'UPDATE_TIMER', value: countDown});
7        yield delay(1000);
8        countDown -= 1;
9    }
10    yield put({type: 'INCREMENT'});
11}
12
13export function* mySaga() {
14    yield takeEvery('ASYNC_INCREMENT', sagaWorker);
15}

action.ts

1export interface Action<T> {
2    type: string;
3    value?: T
4}

state.ts

1export interface StateInterface {
2    count: number;
3    timer: number;
4}
5
6export const initialState = (): StateInterface => {
7    return {
8        count: 0,
9        timer: 0
10    };
11}

reducer.ts

1import { StateInterface, initialState } from './state';
2import { Action } from './action';
3
4export function myReducer(state: StateInterface, action: Action<number>): StateInterface {
5    switch(action.type) {
6        case 'INCREMENT':
7            return { count: state.count + 1 , timer: 0 }
8        case 'UPDATE_TIMER':
9            return { count: state.count, timer: action.value }
10        default:
11            return state
12    }
13}

app.tsx

1import * as React from 'react';
2import { useAsyncSagaReducer } from 'react-async-saga-reducer';
3import { myReducer } from './reducer';
4import { mySaga } from './saga';
5import { StateInterface, initialState } from './state';
6import { Action } from './action';
7
8export function App() {
9    //specify types to gain intelligent code completion and TypeScript type checking.
10    const [ state, dispatch ] = useAsyncSagaReducer<StateInterface, Action<number>>(myReducer, mySaga, initialState());
11
12    return (
13        <div className="App">
14            <p>Count: {state.count}</p>
15            <br/>
16            <button onClick={() => dispatch({type: 'ASYNC_INCREMENT'})} disabled={state.timer > 0}>Increment after 5 second</button>
17            {state.timer > 0 && <p>...please wait {state.timer} sec...</p>}
18        </div>
19    );
20}