https://habrahabr.ru/post/334408/

• ReactJS
• JavaScript

Для того, чтобы немного сократить шаблонный код при использовании Redux, в голову пришла идея написать максимально простую библиотеку для генерации типов асинхронных запросов.



Сама библиотека здесь.
Что такое типы для асинхронных запросов можно почитать здесь.

Например, вместо того чтобы писать так:

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";

Можно писать так:

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
})

Данная библиотека, как вы уже заметили, использует прием из функционального программирования Partial Application.
Можно заметить, что количество строк уменьшилось с 12 до 5… и это только на три типа.
Мне показалось, что это гораздо удобнее и что это чуток увеличивает скорость разработки…

Пример использования в сагах (Пример исключительно учебный!)

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/.../`;
    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)
};

Простейший пример использования этой библиотеки можно посмотреть вот здесь и здесь.

Вполне возможно, что таких библиотек много, но мне нравиться именно такая реализация. Возможно где, то есть ошибки в примерах т.к. я торопился… Пишите в комментариях свои замечания и ваше мнение…