Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fullstack-development/redux-make-communication
Make communication actions and reducers for redux
https://github.com/fullstack-development/redux-make-communication
Last synced: about 5 hours ago
JSON representation
Make communication actions and reducers for redux
- Host: GitHub
- URL: https://github.com/fullstack-development/redux-make-communication
- Owner: fullstack-development
- License: mit
- Created: 2018-10-29T11:12:59.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-05T02:23:56.000Z (almost 2 years ago)
- Last Synced: 2024-09-22T00:42:58.940Z (about 2 months ago)
- Language: TypeScript
- Size: 183 KB
- Stars: 7
- Watchers: 13
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# redux-make-communication
Make communication actions and reducers for redux
## Motivation
This 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.
### How it looks like without a library
Action creators
```javascript
const fetchDeposit = (data) => {
type: 'FETCH_DEPOSIT',
payload: { data },
}
const fetchDepositSuccess = (data) => {
type: 'FETCH_DEPOSIT_SUCCESS',
payload: { data },
}
const fetchDepositFail = (error) => {
type: 'FETCH_DEPOSIT_FAIL',
payload: { error },
}
```
```javascript
...
// We use redux-thunk for example
export const getDeposit = id => {
store.dispatch(fetchDeposit());
return function(dispatch, getState) {
return fetch(`https://deposits.com/${id}`)
.then(data => data.json())
.then(data => {
if (data.message === 'Not Found') {
throw new Error('No such deposit found!');
}
dispatch(fetchDepositSuccess(data));
})
.catch(error => dispatch(fetchDepositFail(error)));
};
};
```
Reducers
```javascript
const depositReducer = (state, action) => {
return (state = initial, action) => {
switch (action.type) {
case 'FETCH_DEPOSIT_SUCCESS':
return { state: actions.payload };
case 'FETCH_DEPOSIT_FAIL':
return { state: actions.error };
default: return state;
}
};
}
```
Go to [usage](#usage) to see an example of our solution
## Installation
```sh
npm install redux-make-communication --save
```
```sh
yarn add redux-make-communication
```
## API
The library allows you to formalize and typify the management of your actions, encapsulating the logic of creating actions and reducers.
`makeCommunicationActionCreators(string, string, string)` - a function that takes action(`execute`, `success`, `fail`) types and returns communication action creators (`executeAction`, `successAction`, `failAction`).
`makeCommunicationReducer('' | { string, boolean })` - a function that takes action types(`execute`, `success`, `fail`) and an initial state for the reducer
## Usage
### Create action creators with `makeCommunicationActionCreators`
```typescript
import { makeCommunicationActionCreators } from 'redux-make-communication';
import * as NS from './namespace';
export const { execute: fetchDeposit, success: fetchDepositSuccess, fail: fetchDepositFail } =
makeCommunicationActionCreators(
'FETCH_DEPOSIT', 'FETCH_DEPOSIT_SUCCESS', 'FETCH_DEPOSIT_FAIL',
);
```
each action creator accepts an optional argument payload that can be typed using the types in the library
```typescript
IPlainAction // T - action type
IAction // T - action type, P - payload
IPlainFailAction // T - action type, E - error
IFailAction // T - action type, E - error, P - payload
type IFetchDeposit = IPlainAction<'FETCH_DEPOSIT'>;
type IFetchDepositSuccess = IAction<'FETCH_DEPOSIT_SUCCESS', IDeposit>;
type IFetchDepositFail = IPlainFailAction<'FETCH_DEPOSIT_FAIL'>;
```
### Create redux state with `makeCommunicationReducer`
```typescript
import { makeCommunicationReducer } from 'redux-make-communication';
import initial from './initial';
import * as NS from './namespace';
export const depositReducer = {
depositFetching: makeCommunicationReducer(
'FETCH_DEPOSIT',
'FETCH_DEPOSIT_SUCCESS',
'FETCH_DEPOSIT_FAIL',
initial.depositFetching,
),
}
```
the created state branch looks like
```typescript
ICommunication {
isRequesting: boolean;
error: string;
}
```