Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hourliert/redux-crud-observable
Actions, reducers & epics for managing crud redux state.
https://github.com/hourliert/redux-crud-observable
crud observable redux rxjs
Last synced: 19 days ago
JSON representation
Actions, reducers & epics for managing crud redux state.
- Host: GitHub
- URL: https://github.com/hourliert/redux-crud-observable
- Owner: hourliert
- License: mit
- Created: 2017-02-03T10:09:05.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-08T16:35:59.000Z (almost 7 years ago)
- Last Synced: 2024-04-23T16:43:48.260Z (7 months ago)
- Topics: crud, observable, redux, rxjs
- Language: TypeScript
- Homepage: https://foodmeup.github.io/redux-crud-observable/index.html
- Size: 362 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# redux-crud-observable
[](https://travis-ci.org/FoodMeUp/redux-crud-observable)
[](https://codecov.io/gh/FoodMeUp/redux-crud-observable)
Ever been tired of manipulating CRUD entities in a redux app? You always have to do the same things again and again:
fetching an entity, doing the corresponding ajax call, waiting for the promise resolution, storing the value in a reducer... Boring.
**redux-crud-observable** is doing all of that for you. You only have to setup your entity name and your api configuration. It will handle the rest for you, ie:
* generating the corresponding actions creators
* generating the corresponding reducer
* generating the corresponding selectors
* handling all ajax calls
It also comes with a very handy feature: request cancellation. It means that you can cancel at any time a request that is already flying ✈️.
## Getting Started
Simply run:
```js
npm install --save redux-crud-observable
```
It also has [peer dependencies](https://github.com/FoodMeUp/redux-crud-observable/blob/e0540947757cc7375b741a71a93ee76a3eeed9bd/package.json#L83): **redux, redux-observable, rxjs and reselect**.
## Doc
You could browse the project documentation [here](https://foodmeup.github.io/redux-crud-observable/index.html).
## Usage
You could check an exemple in [this](https://github.com/FoodMeUp/redux-crud-observable/blob/7fa12ab1d3f73b2c0170d1cb58402a5176ba14a1/src/__tests__/reduxCrudObservable-test.ts#L66) functionnal test.
### Configuration
To use this library, you will have to add the `createEpicMiddleware` from **redux-observable** to your store enhancers.
Here is a bery basic setup.
```js
import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { epicFactory, crudReducerFactory } from 'redux-crud-observable';
const ENTITY = 'JEDI';
const crudReducer = crudReducerFactory(ENTITY);
const rootReducer = combineReducers({
crud: crudReducer,
});
const rootEpic = reduxCrudObservable.crudEpicFactory({
apiConfig: {
apiProto: 'https',
baseUrl: 'api.starwars.galaxy',
json: false,
route: '/jedis',
token: 'Bearer 1234',
version: '/v1',
},
entity: ENTITY,
});
const store = createStore(rootReducer, applyMiddleware(createEpicMiddleware(rootEpic)));
```
### Actions Creators
You can generate and use crud actions creators like that:
```js
import { crudActionsCreatorFactory } from 'redux-crud-observable';
const {
requestReadEntity,
cancelReadEntity,
} = reduxCrudObservable.crudActionsCreatorFactory('JEDI');
console.log(requestReadEntity({
id: 5
})); // { type: 'REQUEST_READ_JEDI', payload: 5 }
```
The full list of actions creators is available [here](https://foodmeup.github.io/redux-crud-observable/interfaces/_actionscreatorfactory_interfaces_crudactions_.icrudactionscreators.html).
### Reducer
You can create the crud reducer and use it like that:
```js
import { combineReducers } from 'redux';
import { crudReducerFactory } from 'redux-crud-observable';
const crudReducer = crudReducerFactory('JEDI');
export default combineReducers({
crud: crudReducer,
});
```
### Epic
You can create the root crud epic like that:
```js
import { crudEpicFactory } from 'redux-crud-observable';
const rootEpic = crudEpicFactory({
apiConfig: {
apiProto: 'https',
baseUrl: 'api.starwars.galaxy',
json: false,
route: '/jedis',
token: 'Bearer 1234',
version: '/v1',
},
entity: 'JEDI',
});
```
### Selectors
You can create some reselect selectors like that:
```js
import { crudSelectorFactory } from 'redux-crud-observable';
const { entitiesValueSelector } = crudSelectorFactory(['crud']);
console.log(entitiesValueSelector(state)); => // Immutable.Map({ 1234: { hash: 1234, name: 'Yoda' } });
```
[Here](https://foodmeup.github.io/redux-crud-observable/interfaces/_selectorfactory_interfaces_selectorfactory_.icrudselectors.html) is the list of available selectors.
## Roadmap
* Make the API configuration more generic ([current implementation](https://foodmeup.github.io/redux-crud-observable/interfaces/_observableapiconnector_interfaces_requestformatters_.iapiconfig.html))