feathers-redux
Integrate Feathers services with your Redux store
Example
On server:
app;app;
On client:
;const feathersClient = ...; // Create Redux actions and reducers for Feathers servicesconst services = ; // Configure Redux store & reducers users: servicesusersreducer messages: servicesmessagesreducer; // Feathers service calls may now be dispatched.store;store;store;
Installation
npm install feathers-redux --save
Documentation: reduxifyServices
;const services = ;
Options:
app
(required) - The Feathers client app.serviceNames
(required, string, array of strings, or object) - The paths of the Feathers services to reduxify.'messages'
is short for{ messages: 'messages' }
. You can dispatch calls withdispatch(services.messages.create(data, params));
.['users', 'messages']
is short for{ users: 'users', messages: 'messages' }
.{ '/buildings/:buildingid': 'buildings' }
will reduxify the Feathers service configured with the path/buildings/:buildingid
. You can dispatch calls withdispatch(services.buildings.create(data, params));
.
options
(optional) - Names for props in the Redux store, and for string fragments in the action constants. The default is
// Names of props for service's Redux state idField: 'id' isError: 'isError' // e.g. state.messages.isError isLoading: 'isLoading' isSaving: 'isSaving' isFinished: 'isFinished' data: 'data' queryResult: 'queryResult' store: 'store' // Fragments to form action constants PENDING: 'PENDING' // e.g. MESSAGES_CREATE_PENDING FULFILLED: 'FULFILLED' REJECTED: 'REJECTED'
reduxifyServices
returns an object of the form
messages: // For the Feathers service with path /messages. // action creators {} // Action creator for app.services('messages').create(data, params) {} {} {} {} {} {} // Interface for realtime replication. {} // Reinitializes store for this service. // action types types: RESET: 'RESET' STORE: 'STORE' SERVICES_MESSAGES_FIND: 'SERVICES_MESSAGES_FIND' SERVICES_MESSAGES_FIND_PENDING: 'SERVICES_MESSAGES_FIND_PENDING' SERVICES_MESSAGES_FIND_FULFILLED: 'SERVICES_MESSAGES_FIND_FULFILLED' SERVICES_MESSAGES_FIND_REJECTED: 'SERVICES_MESSAGES_FIND_REJECTED' // same for all methods GET, CREATE... // reducer {} // Reducers handling actions MESSAGES_CREATE_PENDING, _FULFILLED, and _REJECTED. users: ...
Service calls may be dispatched by
;
Reducers may be combined with
;
ProTip: You have to include
redux-promise-middleware
andredux-thunk
in your middleware.
You may listen to actions dispatched by feathers-redux
, for example to manage your side-effects. With redux-saga
, it would be done with:
;
Documentation: getServicesStatus
Its common for React apps to display info messages such as "Messages are being saved."
getServicesStatus
returns a relevant message for the reduxified Feathers services.
;const msg =
Options:
state
(required) - The state containing state for the services.serviceNames
(required, string, array of strings) - The names of the Feathers services.
The services are checked from left to right.
They first are checked for an error condition (isError
),
and if an error is found the function returns an object similar to
message: 'users: Error.message' className = ErrorclassName // Can be used to internationalize the message. serviceName = 'users';
Next they are check for loading or saving, and if one is found the function returns an object similar to
message: 'users is loading' className = 'isLoading' // Or isSaving. serviceName = 'users';
Otherwise the object is returned with empty strings.
Realtime replication
The Feathers read-only, realtime replication engine is
feathers-offline-realtime
.
You can connect this engine with
const Realtime = ;const messages = feathersClient; const messagesRealtime = messages { store;} ;
Shape of the store
The above code produces a state shaped like
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: hookresult // Results from other than a find call queryResult: hookresult // Results from a find call. May be paginated. 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: ... ;
Autobind Action Creators
Method to bind a given dispatch function with the passed services.
This helps with not having to pass down store.dispatch
as a prop everywhere the service is being used. Read More: http://redux.js.org/docs/api/bindActionCreators.html
; // create a services object as described aboveconst rawServices = ; // create a store with rootReducer combining reducers from rawServicesconst store = // use the bindWithDispatch method to bind rawServices' action creators with store.dispatchconst services =
// beforestore;store;store; // afterservicesmessages;servicesmessages;servicesmessages;
Realtime Feathers Updates
If any of your services need real time updates, you can dispatch any of the following actions depending on your use case:
; ; ; ;
In order for the redux store to update in realtime, these action dispatches should be encapsulated within feathers service.on()
event listener:
const messages = app; messages messages messages messages
Note: idField
is used to match events with correct objects.
Action Pending/Loading
The following properties exist in all of the feather services:
const pendingDefaults = createPending: false findPending: false getPending: false updatePending: false patchPending: false removePending: false ;
The service pending state will be updated according to the dispatched action.
`will update the state to:` createPending: true `will update the state to:` findPending: true `will update the state to:` getPending: true
Examples
example/
contains an example you may run. Its README has instructions.
feathers-redux/test/integration.test.js
may answer any questions regarding details.
License
Copyright (c) 2017
Licensed under the MIT license.