-Поиск по дневнику

Поиск сообщений в rss_rss_hh_new

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 17.03.2011
Записей:
Комментариев:
Написано: 51


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

Суббота, 29 Июля 2017 г. 18:25 + в цитатник
Для того чтобы немного сократить шаблонный код при использовании 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
})


Мне показалось, что это гораздо удобнее и что это чуток увеличивает скорость разработки…

Пример использования в сагах (Пример исключительно учебный!)
import reduxTypesCreator from "redux-types-creator";
import { takeEvery, put } from 'redux-saga/effects';
import { GET_REDDITS } from "../actions/Reddits";
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)
};


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

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

Проголосовал 1 человек. Воздержавшихся нет.

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

Original source: habrahabr.ru (comments, light).

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

Метки:  

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку