redux-utility-belt
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.14 • Public • Published

    Redux utility belt

    A bunch of functions to make writing reducers, action creators and making API calls a bit less tedious.

    Usage

    Install the library by running:

    yarn add redux-utility-belt
    

    Making API calls

    You need to add the restSaga and set axios (or any other function that receives a config object containing url, data and config as their arguments):

    import { restSagas, setFetchAlt } from 'redux-utility-belt';
    
    ...
    sagaMiddleware.run(restSagas);
    

    In order to make API calls, create an action. The action type must be the result of calling one of the rest action type:

    import { postType, putType, getType, deleteType } from 'redux-utility-belt';
    
    export const LOGIN = 'AUTH/LOGIN';
    
    export const login = ({ email, password }) => ({
      type: postType(LOGIN),
      payload: { data: { email, password }, baseType: LOGIN, url: '/login' },
    });
    

    You can also pass callbacks to callback.onSuccess and callback.onFailure.

    Creating reducers

    Reducers created by the utility belt are made to work with the restSaga. So in order to make it easier to make API calls, the reducer object passed to the function has 5 keys: get, post, put, delete, none. The action is passed to none object if action.type is not the result of calling one of the rest action types.

    Rest types in the reducer have three types: request, success or failure.

    import { postType, createReducer } from 'redux-utility-belt';
    import { Dictionary } from '../../types';
    
    // Constants
    export const LOGIN = 'AUTH/LOGIN';
    
    // Action Creators
    export const login = ({ email, password }) => ({
      type: postType(LOGIN),
      payload: { data: { email, password }, baseType: LOGIN, url: '/login' },
    });
    
    // Reducer
    export interface AuthState {
      isLoggingIn: boolean;
      user: Dictionary<any>;
      token: null | string;
      error: null | string;
    }
    
    const token = localStorage.getItem('auth_token');
    export const initialState: AuthState = {
      isLoggingIn: token !== 'undefined' && token !== undefined && token !== null,
      user: {},
      token: token === 'undefined' ? null : token || null,
      error: null,
    };
    
    const auth = createReducer<AuthState>(initialState, {
      post: {
        [LOGIN]: {
          request: state => ({ ...state, isLoggingIn: true, error: null }),
          failure: (state, action) => ({
            ...state,
            isLoggingIn: false,
            error: action.payload,
          }),
          success: (state, { payload: { token, ...user } }) => {
            localStorage.setItem('auth_token', token);
            return {
              ...state,
              isLoggingIn: false,
              user,
              token,
            };
          },
        },
      },
    });
    

    Created using the fantastic TypeScript library starter

    Keywords

    Install

    npm i redux-utility-belt

    DownloadsWeekly Downloads

    18

    Version

    0.0.14

    License

    MIT

    Unpacked Size

    244 kB

    Total Files

    32

    Last publish

    Collaborators

    • mahdiponline