非同期リクエスト用の最も単純なreduxタイプジェネレーター

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

このライブラリは、すでにお気づきのように、 部分アプリケーションの関数型プログラミングのトリックを使用しています 。

行数が12から5に減少していることがわかります。これは3種類のみです。 これははるかに便利であり、これにより開発速度がわずかに向上するように思えました...

サガでの使用例（例は教育のみです！）：

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

このライブラリを使用する最も簡単な例は、 こことここにあります 。

そのようなライブラリが多数存在する可能性はありますが、私はそのような実装が好きです。 おそらくどこに、つまり、例のエラー、なぜなら 私は急いでいました...あなたのコメントとあなたの意見をコメントに書いてください...