❤
npm
Sign UpSign In

react-scax
TypeScript icon, indicating that this package has built-in type declarations

0.2.8 • Public • Published

React-Scax

npm version

React-Scax is an NPM package intended to synchronize AJAX calls and JavaScript Promise resolution in React Application.

Installation

Use the package manager npm to install react-scax.

npm install react-scax

Usage

Quick Start

import React from 'react'
import {
    attach, AjaxCallMethod, createPool, Template,
} from 'react-scax'
 
const { createPromise } = Template
 
const POOL_NAME = 'pool'
const SCAXER_NAME = 'scaxer'
 
const pool = createPool(POOL_NAME)
pool.register({
    [SCAXER_NAME]: {
        promise: createPromise(Template.types.AJAX_JSON_TEMPLATE,
            { url: 'http://your-api.com/api/v1/', method: AjaxCallMethod.GET},
        )
        mapResultToData: result => result.data,
    }
})
const scaxer = pool.getScaxer(SCAXER_NAME)
 
class ScaxerComponent extends React.Component {
    render() {
        return (
            <div>
                <button onClick={scaxer.call}>Click</button>
                <div>data: {scaxer.getData()} </div>
                <div>status: {scaxer.getStatus()} </div>
            </div>
        )
    }
}
 
export attach(POOL_NAME, [SCAXER_NAME])(ScaxerComponent)

with TypeScript

Type define for Scaxer

type ScaxerDataType = {
    [SCAXER_NAME_I]: {
        TParamType: number;
        TDataType: string;
        TResultType: { data: string };
    },
    [SCAXER_NAME_II]: {
        TParamType: { num: string };
        TDataType: string;
        TErrorType: number;
        TResultType: { data: string };
        TReasonType: { error: number };
    }
}

Scaxer configuration

import { TScaxerBatchConfiguration } from 'react-scax'
 
const scaxerBatchConfigs: TScaxerBatchConfiguration<ScaxerDataType> = {
    [SCAXER_NAME_I]: {
        blocking: SCAXER_BLOCKING.UPCOMING,
        mapResultToData: (result: { data: number }) => result.data,
        promise: (param: number) => new Promise(resolve => {
            setTimeout(() => resolve({ data: param + '' }), 2000);
        }),
    },
    [SCAXER_NAME_II]: {
        onFulfillment: SCAXER_NAME_I,
        onRejection: () => { console.log('FAILED.'); },
        mapResultToData: result => result.data,
        mapReasonToError: reason => reason.error,
        promise: createPromise(Template.types.AJAX_JSON_TEMPLATE,
            { url: 'http://your-api.com/api/v1/', method: AjaxCallMethod.GET }),
    }

Pool initiation

const pool = createPool(POOL_NAME, scaxerBatchConfigs)

Get and Call Scaxer

scaxerII = pool.getScaxer(SCAXER_NAME_II)
scaxerII.call({ num: '1000' })

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

ISC License

Readme

Keywords

none

Package Sidebar

Install

npm i react-scax

Weekly Downloads

2

Version

0.2.8

License

ISC

Unpacked Size

308 kB

Total Files

8

Last publish

Collaborators

  • guokt
  • mysun
Try on RunKit
Report malware