nicobarray / aquedux

Redux over the wire
46 stars 3 forks source link
api javascript network real-time redux
⚠ Disclamer: This project is not actively maintained anymore. Feel free to take on the idea and improve it if you choose so.

svgr

Redux over the wire

Aquedux is a Redux enhancer that enables seamless real-time synchronization across many JavaScript clients.

npm version npm version lerna Conventional Commits

Philosophy

With Aquedux, you can write your server code with the same logic than your web/native app. No need to use another library that forces you to add GraphQL or RESTfull endpoints. Everything is a Redux app.

Aquedux shares your App state across every connected instance. It can be a Node.js microservice, a React app, or anything that can depend on Redux.

It makes the writing of client and server app easy. There is no need to add another technical layer. If you know how to use Redux, you know how to use Aquedux.

For more on this, check out:

Installation

Aquedux

If you use Yarn

// Client side (aka browser & Redux app)
yarn add aquedux-client
// or
npm i aquedux-client

// Server side (aka Node.js & Redux app)
yarn add aquedux-server
// or
npm i aquedux-server

Redis

For the aquedux-server app to work, you have to install a Redis server on your machine. Don't worry, if you have never installed one, it is extremly simple:

You don't have to configure anything, just running it. You should now have a running Redis instance.

Getting Started

Let see the required steps to integrate Aquedux in your current Redux workflow for the client and the server app.

The client app

import { applyMiddleware } from 'redux'
import { createStore, createAquedux, subscribe } from 'aquedux-client'

// The app reducer is shared with the server app.
import reducer from './reducers'

const aquedux = createAquedux({
  hydratedActionTypes: ['ADD_TODO', 'TOGGLE_TODO'],
  endpoint: 'http://localhost:3001/aquedux',
  channels: [ 'todos' ]
})

const store = createStore(reducer, applyMiddleware(aquedux));

/* 
** When subscribing to a channel you are telling Aquedux to receive all related actions in real-time.
** The first action you receive is the channel's state snapshot.
** In a real world app, this dispatch should be done in a container/component at route level or cDM.
*/
store.dispatch(subscribe('todos'))

The server app

import { createAqueduxServer, aqueduxMiddleware, aqueduxReducer } from 'aquedux-server'
import { createStore, applyMiddleware } from 'redux'
// The app reducer is shared with the client app.
import rootReducer from './reducers'

const appReducer = combineReducer({
  ...rootReducer,
  aquedux: aqueduxReducer
})

const todoTypes = ['ADD_TODO', 'TOGGLE_TODO']

const configureAquedux = (store) => {
  const aqueduxOptions = {
    hydratedActionTypes: todoTypes,
    secret: 'todoExample'
  }

  let server = createAqueduxServer(store, aqueduxOptions)

  /*
  ** The server-side channel definition.
  **
  ** It takes a name to identify it (same as for the front-side definition).
  ** It takes a predicate to filter action types related to it.
  ** It takes a reducer to translate the desired state into a snapshot for first front-side hydratation.
  ** The last argument is a key prefix used to store the channels action.
  */
  server.addChannel(
    'todos',
    action => todoTypes.indexOf(action.type) !== -1,
    getState => {
      const todos = getState().todos
      return todos
    },
    'todos'
  )

  return server;
}

// The middleware who is responsible for the front and back communication.
const enhancers = applyMiddleware(fromAquedux.aqueduxMiddleware)

const store = createStore(appReducer, {}, enhancers)

const aquedux = configureAquedux(store)

aquedux.start('localhost', 3031);

And you are good to go! For more help you can check out the example/ directory. You can also check out each package for their API documentation:

FAQ

At Winamax. It is used on two projects that helped shape Aquedux the way it is. We hope that by open-sourcing the project, it will sparkle others to create interesting stuff.

Authors

Thanks