📜 ⬆️ ⬇️

The simplest redux types generator for asynchronous requests

In order to slightly reduce the template code when using Redux, the idea came up to write the most simple library for generating types of asynchronous requests.

image


The library itself is here . What are types for asynchronous requests can be read here .

For example, instead of writing like this:
')
const CREATE_ITEMS = "CREATE_ITEMS"; const CREATE_ITEMS_START = "CREATE_ITEMS_START"; const CREATE_ITEMS_FINISH = "CREATE_ITEMS_FINISH"; const CREATE_ITEMS_ERROR = "CREATE_ITEMS_ERROR"; const GET_ITEMS = "GET_ITEMS"; const GET_ITEMS_START = "GET_ITEMS_START"; const GET_ITEMS_FINISH = "GET_ITEMS_FINISH"; const GET_ITEMS_ERROR = "GET_ITEMS_ERROR"; const DELETE_ITEMS = "DELETE_ITEMS"; const DELETE_ITEMS_START = "DELETE_ITEMS_START"; const DELETE_ITEMS_FINISH = "DELETE_ITEMS_FINISH"; const DELETE_ITEMS_ERROR = "DELETE_ITEMS_ERROR"; 

You can write like this:

 import reduxTypesCreator from "redux-types-creator"; const actionTypes = reduxTypesCreator(true) // true - object will be frozen. ('START', 'FINISH', 'ERROR') // postfix ('CREATE_ITEMS', 'GET_ITEMS', 'DELETE_ITEMS'); // types console.log(actionTypes); //      /* { CREATE_ITEMS: { START: 'CREATE_ITEMS_START', FINISH: 'CREATE_ITEMS_FINISH', ERROR: 'CREATE_ITEMS_ERROR', SELF: 'CREATE_ITEMS' }, GET_ITEMS: { START: 'GET_ITEMS_START', FINISH: 'GET_ITEMS_FINISH', ERROR: 'GET_ITEMS_ERROR', SELF: 'GET_ITEMS' }, DELETE_ITEMS: { START: 'DELETE_ITEMS_START', FINISH: 'DELETE_ITEMS_FINISH', ERROR: 'DELETE_ITEMS_ERROR', SELF: 'DELETE_ITEMS' } } */ //  . const { CREATE_ITEMS, GET_ITEMS, DELETE_ITEMS } = actionTypes; CREATE_ITEMS.SELF // CREATE_ITEMS CREATE_ITEMS.START // CREATE_ITEMS_START CREATE_ITEMS.FINISH // CREATE_ITEMS_FINISH CREATE_ITEMS.ERROR // CREATE_ITEMS_ERROR //    action creator getItems = () => ({ type: CREATE_ITEMS.SELF }) 

This library, as you have already noticed, uses the technique from functional programming Partial Application .

You can see that the number of lines decreased from 12 to 5 ... and this is only for three types. It seemed to me that it is much more convenient and that this slightly increases the speed of development ...

Example of use in sagas (Example is purely educational!):

 import reduxTypesCreator from "redux-types-creator"; import { takeEvery, put } from 'redux-saga/effects'; const actionTypes = reduxTypesCreator(true) // true - object will be frozen. ('START', 'FINISH', 'ERROR') // postfix ('GET_REDDITS'); // types const { GET_REDDITS } = actionTypes; const getReddits = ({after, count } = {after: null, count: 0}) => ({ type: GET_REDDITS.SELF, after, count, }); const getRedditsFetch = function* (action){ const { after, count } = action; yield put({ type: GET_REDDITS.START }); try { const url = `https://www.reddit.com/blablabla/.../`; //     after, count const result = yield fetch(url); const json = yield result.json(); yield put({ type: GET_REDDITS.FINISH, data: json.data.children, after: json.data.after }); } catch (e) { yield put({ type: GET_REDDITS.ERROR, error: e.message }); } }; export const getRedditsSaga = function* () { yield takeEvery(GET_REDDITS.SELF, getRedditsFetch) }; 

The simplest example of using this library can be found here and here .

It is possible that there are many such libraries, but I like this kind of implementation. Perhaps where, that is, the errors in the examples. I was in a hurry ... Write in the comments your comments and your opinion ...

Source: https://habr.com/ru/post/334408/


All Articles