@webiz/redux-common NPM

Description

@webiz/redux-common generates Higher-Order reducers 
and simplifies async actions for your redux application

Install

npm install @webiz/redux-common

Usage Example

Action Creator

// ProductActions.ts

import { asyncActionCreator , IAsyncActions  } from '@webiz/redux-common';
import * as actionTypes from "./ProductTypes"

export const getProductAction: IAsyncActions = asyncActionCreator(actionTypes.GET_PRODUCT);

// ProductThunks.ts

import { getProductAction } from "./ProductActions";

export const getProduct = (id : number) => {
    return async dispatch => {
        try {

            dispatch(getProductAction.request())

            const product = await axios.get<IProduct>(`/product/${id}`)

            dispatch(getProductAction.success(product));

        } catch (ex) {
            dispatch(getProductAction.fail(ex));
        }
    };
};

High Order Reducer

// productReducer.ts

import { getProductAction } from "./ProductActions";
import { withAsyncStatus , initialAsyncState , initialAsyncState } from '@webiz/redux-common';

export const initialState: ProductState = {
        product: {
            ...initialAsyncState,
        },
    }

export default (state = initialState, action) => {
    switch (action.type) {
        case getProductAction.REQUEST :
        case getProductAction.SUCCESS :
        case getProductAction.FAIL :
            return {
                ...state,
                product: withAsyncStatus(state.product, action , getProductAction),
            };

        default:
            return state;
    }
};