feathers-reduxify-services
Wrap Feathers services so they work transparently and perfectly with Redux.
Integrate Feathers and Redux with one line of code.
This repo has been moved into FeathersJS as feathers-redux
.
That is backward compatible to this repo so any existing code will work as is.
feathers-redux
in addition supports near realtime, read-only replication
of (portions of) the data in remote services.
/* on server */app;app; /* on client */const app = ; // reduxify Feathers' servicesconst services = ; // the 1 line // hook up Redux reducers users: servicesusersreducer messages: servicesmessagesreducer; // Feathers is now 100% compatible with Reduxstore;store;store;
Simple, huh.
Code Example
Expose action creators and reducers for Feathers services. Then use them like normal Redux.
;;const feathersApp = ... // Expose Redux action creators and reducers for Feathers' servicesconst services = ; // Typical Redux store creation, crammed togetherconst store = createStore; // Invoke Feathers' services using standard Redux.store;store;store;
Dispatch Redux actions on Feathers' real time service events.
const messages = feathersApp; messages;
Keep the user informed of service activity.
const status = message;
Replication engines generally maintain a near realtime, local copy of (some of) the records in a service on the server.
feathers-reduxify-services
now provides an interface which you can use
to interface replication engines with the Redux state for the service.
This interface updates the state property store
.
feathers-offline-realtime
is the official Feathersjs realtime replication engine.
Please read its README.
It can be interfaced with feathers-reduxify-services
as follows:
;; const services = ;const store = ); const messagesRealtime = feathersApp; messagesRealtime;
This would create the state:
statemessagesstore = connected: boolean // if the replication engine is still listening to server last: activity eventName record // last activity. See feathers-offline-realtime records: objects // the near realtime contents of the remote service;
Motivation
Feathers is a great real-time client-server framework. Redux is a great state container for the front-end. React is a great declarative UI.
This repo let's all 3 work together easily.
Installation
Install Nodejs.
Run npm install feathers-reduxify-services --save
in your project folder.
You can then require the utilities.
/src
on GitHub contains the ES6 source.
Running the Example
Make sure you have NodeJS installed.
Install your dependencies.
npm install webpack -g
cd path/to/feathers-reduxify-services
npm install
cd example
npm install
Build the client bundle.
npm run build
bundles the client code into public/dist/bundle.js
.
Start your app.
cd path/to/feathers-reduxify-services/example
npm start
Point your browser at localhost:3030/index.html
The client, on startup, adds a Hello
item to messages
, find
's and displays items,
and tries to get
a non-existent item.
You can create
, get
, patch
, remove
and find
items using the UI.
client/feathers/index.js
reduxifies the users
and messages
feathers services
and exports their action creators and reducer as { services }
.
client/reducers/index.js
hooks up the reducers for the reduxified services.
client/index.js
performs the initial create
, find
and get
.
It also configures the realtime replication.
client/App.js::mapDispatchToProps
dispatches UI events.
API Reference
See Code Example.
See /example
working example.
Each module is fully documented.
This repo does the heavy redux lifting in feathers-starter-react-redux-login-roles.
Tests
npm test
to run tests.
npm run cover
to run tests plus coverage.
Change Log
Contributors
License
MIT. See LICENSE.