javascript

Простейший генератор redux types для асинхронных запросов

  • воскресенье, 30 июля 2017 г. в 03:11:21
https://habrahabr.ru/post/334408/
  • ReactJS
  • JavaScript


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


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

Например, вместо того чтобы писать так:
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)
};


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

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