VS Code Snippet for ease of redux-saga request handlers

typescriptreact.json

{
	// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

	"Request saga": {
		"prefix": "rdxs",
		"body": [
		  "import { ${ACTION_NAME}_REQUEST, ${ACTION_NAME}_SUCCESS, ${ActionName}Action, ${ActionName}SuccessAction } from './types';",
		  "",
		  "export function* ${actionName}Request() {",
		  "  yield takeLatest(${ACTION_NAME}_REQUEST, function* ({",
		  "    payload,",
		  "  }: ${ActionName}Action) {",
		  "    yield put(RequestStatusActions.startRequest(${ACTION_NAME}_REQUEST));",
		  "",
		  "    try {",
		  "      const response = yield call($0, payload);",
		  "      yield put({",
		  "        type: ${ACTION_NAME}_SUCCESS,",
		  "        payload: response,",
		  "      });",
		  "      yield put(RequestStatusActions.finishRequest(${ACTION_NAME}_REQUEST));",
		  "    } catch (err) {",
		  "      yield put(RequestStatusActions.finishRequest(${ACTION_NAME}_REQUEST, err));",
		  "    }",
		  "  });",
		  "}",
		  "",
		  "export function* ${actionName}Success() {",
		  "  yield takeLatest(${ACTION_NAME}_SUCCESS, function* ({",
		  "    payload,",
		  "  }: ${ActionName}SuccessAction) {",
		  "",
		  "  });",
		  "}"
		],
		"description": "Request saga"
	}
}

FAQ

How to set up

You can find guide here.

How to use

If you write rdxs in your IDE code editor, the popup will open and you will be able to select the snippet from it. That's it. Happy coding!

Want JavaScript version?

Alright. You can add this snippet to javascriptreact.json which you can select from language list following the above guide.