feathers-redux-immutable
v0.1.0
Published
An immutable, redux data store for FeathersJS services.
Downloads
2
Readme
feathers-redux-immutable
An immutable, redux data store for FeathersJS services.
Install
npm install feathers-redux-immutable --save
Usage
import reduxifyServices from 'feathers-redux-immutable';
const feathersClient = feathers()...;
// Create Redux actions and reducers for Feathers services
const services = reduxifyServices(feathersClient, ['messages', 'users']);
// Configure Redux store & reducers
export default combineReducers({
messages: services.messages.reducer,
users: services.users.reducer,
});
// Feathers service calls may now be dispatched.
store.dispatch(services.messages.get('557XxUL8PalGMgOo'));
Action creators
reduxifyServices
returns an object with the shape:
{
messages: { // For the Feathers service with path /messages.
// action creators
create(data, params) {}, // Action creator for app.services('messages').create(data, params)
update(id, data, params) {},
patch(id, data, params) {},
remove(id, params) {},
find(params) {},
get(id, params) {},
store(object) {}, // Interface for realtime replication.
reset() {}, // Reinitializes store for this service.
// reducer
reducer() {}, // Reducers handling actions MESSAGES_CREATE_PENDING, _FULFILLED, and _REJECTED.
},
users: { ... },
}
Service calls can be dispatched by:
dispatch(services.messages.create(data, params));
Shape of the store
The usage example code produces a Redux state with the shape:
state = {
messages: {
isLoading: boolean, // If get or find have started
isSaving: boolean, // If update, patch or remove have started
isFinished: boolean, // If last call finished successfully
isError: Feathers error, // If last call was unsuccessful
data: hook.result, // Results from other than a find call
queryResult: hook.result, // Results from a find call. May be paginated.
},
users: { ... },
};
If integrating with feathers-offline-realtime-immutable, the state will be decorated with these additional properties:
state = {
messages: {
store: {
connected: boolean, // If replication engine still listening for Feathers service events
last: { // Read https://github.com/feathersjs/feathers-offline-realtime#event-information.
action: string, // Replication action.
eventName: string, // Feathers service event name. e.g. created
records: object, // Feathers service event record.
},
records: [ objects ], // Sorted near realtime contents of remote service
},
},
users: { ... },
}
Replication Engine Integration
const Realtime = require('feathers-offline-realtime-immutable');
const messages = feathersClient.service('/messages');
const messagesRealtime = new Realtime(messages, { subscriber: (records, last) => {
store.dispatch(services.messages.store({ connected: messagesRealtime.connected, last, records }));
} });
Why Immutable?
Immutable objects allow for shallow equality checking.
If you're using React to render your application, you can increase performance by utilizing a shallow comparison (as opposed to a more expensive deep object comparison) in the shouldComponentUpdate
lifecycle method. The behavior is the default when extending from React.PureComponent.
This implementation uses timm, which uses plain JS objects.
Acknowledgements
- feathers-redux was our inspiration.
License
MIT