redux-crud-observable
v1.1.1
Published
Actions, reducers & epics for managing crud redux state
Downloads
27
Readme
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:
npm install --save redux-crud-observable
It also has peer dependencies: redux, redux-observable, rxjs and reselect.
Doc
You could browse the project documentation here.
Usage
You could check an exemple in this 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.
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:
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.
Reducer
You can create the crud reducer and use it like that:
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:
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:
import { crudSelectorFactory } from 'redux-crud-observable';
const { entitiesValueSelector } = crudSelectorFactory(['crud']);
console.log(entitiesValueSelector(state)); => // Immutable.Map({ 1234: { hash: 1234, name: 'Yoda' } });
Here is the list of available selectors.
Roadmap
- Make the API configuration more generic (current implementation)