mutasync

Syncs your state manager offline & online

Mutasync provides an easy way to save state in localStorage, authenticate and save mutations online using a mutasync-server. It allows to build apps that are meant "front first" where we put all trust in user's browser. It is well suited for ideas where there is no real usage of a database. See mutasync-server github page for more information regarding how data is used.

:bomb: For now mutasync works with mutastore (a forked version of unistore) a pending PR to Unistore is open. If merged mutastore could then cease to exist preferably for Unistore

• Saves in LocalStorage
• Saves online
• Works with JWT
• Dead small & simple code

Install

This project uses node and npm. Go check them out if you don't have them locally installed.

npm install --save mutasync

Usage

Mutasync works best with mutastore, any compatible store should do, but for now you have to go trough the installation and usage of mutastore.

Once installed,

Mandatory step

import sync from 'mutasync';

const SYNC = sync({
  host: 'your-end-point'
})

// This handle submission of mutations to save
store.subscribe(SYNC.apply)

To handle localStorage

class App extends Component {
  componentDidMount = () => store.setState(
    sync('mytoken').retrieveLocal()
  )

  render = () => <div id="app">
    <Provider store={store}>
      <Page />
    </Provider>
  </div>
}

To handle authentication

const LoginBase = ({login}) => <form onSubmit={
  (e) => {
    e.preventDefault();
    login( e.target[0].value, e.target[1].value )
  }
}>
  <label>Username</label>
  <input type="text" id="email" />
  <label>Password</label>
  <input type="password" id="password" />
  <button type="submit">Login</button>
  <button onClick={(e) => {
    e.preventDefault();
    sync('mytoken').clearLocal(defaults)
    store.mutate({logout: defaults}, true)
  }}>Logout</button>
</form>

const Login = connect(
  (state, props) => ({...state}),
  (state, props) => ({
    login: (state, username, password) => SYNC
      .auth( username, password )
      .then( (res) => res.json() )
      .then( (res) => ({ authenticate: { ...res }, sync: false }))
      .catch(function(res) {
         console.log('error :', res);
      })
  })
)(LoginBase)

API

sync

Constructs a sync object which contains all the API methods.

Parameters

• destination is an object in the form { 'host': 'host-endpoint', }
• v is a function that should check wether the user is authenticated.

Examples

const SYNC = sync({
  host: 'your-server-endpoint'
})

retrieveLocal

Retrieve state from localStorage (Should be used when your master has loaded)

Examples

SYNC.retrieveLocal()

clearLocal

Clears state from localStorage (For your logout button)

Parameters

• dflt is how the default state should like

Examples

SYNC.clearLocal({})

apply

Sends state update, saves it in localeStorage

Parameters

• state is the new current state
• action is the action that triggered the update

Examples

store.suscribe(SYNC.apply)

auth

Authenticate function, still need to .then and .catch it

Parameters

• username
• password