REDUX-SAGA-CALL-API

Redux saga with the action creator for calling api with XMLHttpRequests

Prerequisites

For projects with redux and redux-saga, written on typescript

Getting Started

Installation

To install and set up the library, run:

1$ npm install redux-saga-call-api

Or if you prefer using Yarn:

1$ yarn add redux-saga-call-api

Usage

Saga installation

Add callApiSaga to your root saga:

Example:

1import createSagaMiddleware from 'redux-saga';
2import { callApiSaga } from 'redux-saga-call-api';
3import { store } from '.'; // redux store
4
5const sagaMiddleware = createSagaMiddleware();
6
7function* rootSaga() {
8  yield fork(callApiSaga, store);
9  ...
10}
11
12sagaMiddleware.run(rootSaga);
13

Call api whereever you want inside your app, for example:

1import { HTTPRequestMethods } from "redux-saga-call-api/lib/lib/types";
2import { callApi } from "redux-saga-call-api";
3
4//GET
5export const getData = async (id: string) => {
6  callApi({
7    actionTypes: [`GET_DATA_REQUEST`, `GET_DATA_SUCCESS`, `GET_DATA_FAILURE`],
8    url: `${URI}/api/v1/data/${id}`,
9    method: HTTPRequestMethods.GET,
10  });
11};
12
13//POST
14export const addData = async (data: DataType) => {
15  callApi({
16    actionTypes: [`ADD_DATA_REQUEST`, `ADD_DATA_SUCCESS`, `ADD_DATA_FAILURE`],
17    url: `${URI}/api/v1/data`,
18    method: HTTPRequestMethods.POST,
19    data,
20  });
21};
22
23// in component
24export const AddDataPage: React.FunctionComponent = () => {
25  const onSubmitHandle = (data: DataType) => {
26    addData(data);
27  };
28
29  return <DataForm onSubmit={onSubmitHandle} />;
30};

Authors

• Mikl Zhdanov - Initial work - Mikl Zhdanov

License

MIT