# react_redux_api

> Collection of actions, reducers and helpers for work with API

Latest version **0.1.0** (published 2025-09-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react_redux_api
pnpm add react_redux_api
yarn add react_redux_api
bun add react_redux_api
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

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

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2025-09-03 |
| First published | 2022-03-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 90.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Siarhei Petrashka |
| Maintainers | pietrazsko |

## Links

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

## Dependencies (4)

- [axios](https://npm.io/package/axios.md) ^1.5.0
- [redux-saga](https://npm.io/package/redux-saga.md) ^1.2.3
- [memoize-state](https://npm.io/package/memoize-state.md) ^2.0.15
- [redux-actions](https://npm.io/package/redux-actions.md) ^2.6.5

## Recent versions

- 0.1.0 (latest) — 2025-09-03
- 0.0.9 — 2022-03-17
- 0.0.8 — 2022-03-12
- 0.0.7 — 2022-03-12
- 0.0.6 — 2022-03-12
- 0.0.5 — 2022-03-12
- 0.0.4 — 2022-03-11
- 0.0.3 — 2022-03-11

## README

## react_redux_api_helpers

react_redux_api_helpers is library for eiser using redux store and `redux-sagas` with request to server.
It based on redux-saga and axios packages.

## Getting started

### Installation

    $ npm install --save react_redux_api_helpers

or

    $ yarn add react_redux_api_helpers

### Usage

init in root saga:

    import  *  as  apiHelpers  from  'api';
    // some code

     const {modules: { apiWatchRequest },axios: { init },} = apiHelpers;
     //init main routes
     if (process.env.NODE_ENV == 'development') {
       init('http://localhost:3001'); //develop server
    } else if (process.env.NODE_ENV == 'production') {
       init('https://translates.goman.live');// production server
    }

    function* rootSaga(dispatch) {
    yield all([
        apiWatchRequest({
            additiveCallback: function*({ showLoaderFlag = true, ...data }) {
                //show loader
                if (showLoaderFlag) {
                    yield put(showLoader());
                }

                // add credentials for  request
                const credentials = yield select(authHashSelector);
                if (credentials) {
                    set(data, 'headers.Authorization', `${credentials}`);
                }
                return data;
            },
            successCallback: function*(data) {
                yield put(hideLoader());
                if (
                    data.config.method === 'put' ||
                    data.config.method === 'post' ||
                    data.config.method === 'delete'
                ) {
                    console.log(data);
                    const message = get(data, 'data.message');
                    if (message) {
                        yield put(showSuccess({ message }));
                    } else {
                        yield put(
                            showSuccess({ message: 'Successful operation.' }),
                        );
                    }
                }
            },
            failedCallback: function*(data) {
                const dataStatus = data.status;
                yield put(hideLoader());
                switch (true) {
                    case dataStatus === 401:
                        yield call(history.push, '/login');
                        return;
                    case dataStatus === 500:
                        yield put(
                            showError({ message: 'Internal server error.' }),
                        );
                        return;
                    case dataStatus === 406: {
                        const message = get(
                            data,
                            'response.data.message',
                            'Internal server error.',
                        );
                        yield put(showError({ message }));
                        return;
                    }
                    case dataStatus === 403: {
                        const message = get(
                            data,
                            'response.data.message',
                            'Internal server error.',
                        );
                        yield put(showError({ message }));
                        return;
                    }
                    default: {
                        const error = get(data, 'response.data.error');
                        if (
                            typeof error === 'object' &&
                            error.type === 'popup'
                        ) {
                            yield put(showError({ message: error.message }));
                        }
                        return;
                    }
                }
            },
        }),
        initModuleSaga(dispatch),
        authSaga(dispatch),
        i18nextModuleSaga(dispatch),
        notificationSaga(dispatch),
    ]);

    }

I recommended use principe Redux-ducks for organization of code , example below.

    import * as api_helpers from 'api';

    const modules = 'languages';
    const {
    helpers: { actionCreator, apiSelector },
    modules: { ApiRoutes },
    } = api_helpers;

    const apiRoutes = new ApiRoutes();

    export const GET_LANGUAGES_LIST_REQUEST = `${modules}/GET_LANGUAGES_LIST_REQUEST`

    export const POST_IMPORT_JSON_REQUEST = `${modules}/POST_IMPORT_JSON_REQUEST`;


    export const getTranslatedListRequest = actionCreator(
    GET_LANGUAGES_LIST_REQUEST,
    );

    export const postImportJsonRequest = actionCreator(POST_IMPORT_JSON_REQUEST);


    apiRoutes.add(GET_LANGUAGES_LIST_REQUEST, ({ ...params }) => ({
    url: `/get-all-keys`,
    method: 'get',
    params,
    }));

    apiRoutes.add(POST_IMPORT_JSON_REQUEST, (data) => {
    return {
        url: `/import-json`,
        method: 'post',
        data,
        headers: { 'Content-Type': 'multipart/form-data' },
        showLoaderFlag:false

    };
    });

    export const getTranslatedListSelector = apiSelector(GET_LANGUAGES_LIST_REQUEST);

## API

### init(url)

`url` - base url for the axios.

### ApiRoutes.add(actionType, fn)

`actionType` - string must end with `_REQUEST`. For example `GET_USER_REQUEST`.
`fn` - function for prepare request. For example - `url: /import-json,

     (data) => {
        return {
            url: `/import-json`,
            method: 'post',
            data,
            headers: { 'Content-Type': 'multipart/form-data' },
            showLoaderFlag:false
        }

More information: https://github.com/axios/axios#request-config

### apiSelector(actionType,options)

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