{"id":20464068,"url":"https://github.com/fullstack-development/redux-make-communication","last_synced_at":"2025-04-13T08:33:43.465Z","repository":{"id":33454514,"uuid":"155198561","full_name":"fullstack-development/redux-make-communication","owner":"fullstack-development","description":"Make communication actions and reducers for redux","archived":false,"fork":false,"pushed_at":"2022-12-05T02:23:56.000Z","size":187,"stargazers_count":7,"open_issues_count":9,"forks_count":0,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-27T00:13:11.227Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fullstack-development.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-29T11:12:59.000Z","updated_at":"2020-12-21T10:30:04.000Z","dependencies_parsed_at":"2023-01-15T00:59:27.928Z","dependency_job_id":null,"html_url":"https://github.com/fullstack-development/redux-make-communication","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstack-development%2Fredux-make-communication","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstack-development%2Fredux-make-communication/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstack-development%2Fredux-make-communication/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstack-development%2Fredux-make-communication/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fullstack-development","download_url":"https://codeload.github.com/fullstack-development/redux-make-communication/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248684488,"owners_count":21145089,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T13:13:56.005Z","updated_at":"2025-04-13T08:33:43.428Z","avatar_url":"https://github.com/fullstack-development.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redux-make-communication\nMake communication actions and reducers for redux\n\n## Motivation\nThis library provides tools for creating and managing actions and reducers to manage your state when accessing a third-party server or a backend server. The created state provides a flag for processing the status of the request, showing its error if there is one. Based on this state, you can display the process of client communication with the server.\n### How it looks like without a library\nAction creators\n```javascript\nconst fetchDeposit = (data) =\u003e {\n  type: 'FETCH_DEPOSIT',\n  payload: { data },\n}\nconst fetchDepositSuccess = (data) =\u003e {\n  type: 'FETCH_DEPOSIT_SUCCESS',\n  payload: { data },\n}\nconst fetchDepositFail = (error) =\u003e {\n  type: 'FETCH_DEPOSIT_FAIL',\n  payload: { error },\n}\n```\n```javascript\n...\n// We use redux-thunk for example\nexport const getDeposit = id =\u003e {\n  store.dispatch(fetchDeposit());\n  return function(dispatch, getState) {\n    return fetch(`https://deposits.com/${id}`)\n      .then(data =\u003e data.json())\n      .then(data =\u003e {\n        if (data.message === 'Not Found') {\n          throw new Error('No such deposit found!');\n        }\n        dispatch(fetchDepositSuccess(data));\n      })\n      .catch(error =\u003e dispatch(fetchDepositFail(error)));\n  };\n};\n```\nReducers\n```javascript\nconst depositReducer = (state, action) =\u003e {\n  return (state = initial, action) =\u003e {\n    switch (action.type) {\n      case 'FETCH_DEPOSIT_SUCCESS':\n        return { state: actions.payload };\n      case 'FETCH_DEPOSIT_FAIL':\n        return { state: actions.error };\n      default: return state;\n    }\n  };\n}\n```\nGo to [usage](#usage) to see an example of our solution\n## Installation\n```sh\nnpm install redux-make-communication --save\n```\n```sh\nyarn add redux-make-communication\n```\n## API\nThe library allows you to formalize and typify the management of your actions, encapsulating the logic of creating actions and reducers.\n`makeCommunicationActionCreators(string, string, string)` - a function that takes action(`execute`, `success`, `fail`) types and returns communication action creators (`executeAction`, `successAction`, `failAction`).\n\n`makeCommunicationReducer('' | { string, boolean })` - a function that takes action types(`execute`, `success`, `fail`) and an initial state for the reducer\n## Usage\n### Create action creators with `makeCommunicationActionCreators`\n```typescript\nimport { makeCommunicationActionCreators } from 'redux-make-communication';\nimport * as NS from './namespace';\n\nexport const { execute: fetchDeposit, success: fetchDepositSuccess, fail: fetchDepositFail } =\n  makeCommunicationActionCreators\u003cNS.IFetchDeposit, NS.IFetchDepositSuccess, NS.IFetchDepositFail\u003e(\n    'FETCH_DEPOSIT', 'FETCH_DEPOSIT_SUCCESS', 'FETCH_DEPOSIT_FAIL',\n  );\n```\neach action creator accepts an optional argument payload that can be typed using the types in the library\n```typescript\nIPlainAction\u003cT\u003e     // T - action type\nIAction\u003cT, P\u003e       // T - action type, P - payload\nIPlainFailAction\u003cT, E = string\u003e   // T - action type, E - error\nIFailAction\u003cT, P, E = string\u003e     // T - action type, E - error, P - payload\n\ntype IFetchDeposit = IPlainAction\u003c'FETCH_DEPOSIT'\u003e;\ntype IFetchDepositSuccess = IAction\u003c'FETCH_DEPOSIT_SUCCESS', IDeposit\u003e;\ntype IFetchDepositFail = IPlainFailAction\u003c'FETCH_DEPOSIT_FAIL'\u003e;\n```\n### Create redux state with `makeCommunicationReducer`\n```typescript\nimport { makeCommunicationReducer } from 'redux-make-communication';\nimport initial from './initial';\nimport * as NS from './namespace';\n\nexport const depositReducer = {\n  depositFetching: makeCommunicationReducer\u003cNS.IFetchDeposit, NS.IFetchDepositSuccess, NS.IFetchDepositFail\u003e(\n    'FETCH_DEPOSIT',\n    'FETCH_DEPOSIT_SUCCESS',\n    'FETCH_DEPOSIT_FAIL',\n    initial.depositFetching,\n  ),\n}\n```\nthe created state branch looks like\n```typescript\nICommunication {\n  isRequesting: boolean;\n  error: string;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstack-development%2Fredux-make-communication","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffullstack-development%2Fredux-make-communication","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstack-development%2Fredux-make-communication/lists"}