# react-scax

> [![npm version](https://badge.fury.io/js/react-scax.svg)](https://badge.fury.io/js/react-scax)

Latest version **0.2.8** (published 2020-03-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-scax
pnpm add react-scax
yarn add react-scax
bun add react-scax
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.8 |
| Published | 2020-03-11 |
| First published | 2019-11-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 301 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Guo Kaitong, Sun Mingyang |
| Maintainers | guokt, mysun |

## Links

- npm: https://www.npmjs.com/package/react-scax
- npm.io page: https://npm.io/package/react-scax

## Recent versions

- 0.2.8 (latest) — 2020-03-11
- 0.2.7 — 2020-03-10
- 0.2.6 — 2020-03-10
- 0.2.5 — 2020-03-10
- 0.2.4 — 2020-02-14
- 0.2.3 — 2020-02-14
- 0.2.2 — 2020-01-22
- 0.2.1 — 2019-12-16
- 0.2.0 — 2019-12-13
- 0.1.0 — 2019-12-05
- 0.0.4 — 2019-12-05
- 0.0.3 — 2019-11-28
- 0.0.1 — 2019-11-28

## README

# React-Scax

[![npm version](https://badge.fury.io/js/react-scax.svg)](https://badge.fury.io/js/react-scax)

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

## Installation

Use the package manager [npm](https://docs.npmjs.com/cli/install) to install react-scax.

```bash
npm install react-scax
```

## Usage
### Quick Start
```javascript
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
```typescript
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
```typescript
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
```typescript
const pool = createPool(POOL_NAME, scaxerBatchConfigs)
```
#### Get and Call Scaxer
```typescript
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](https://choosealicense.com/licenses/isc/)

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