Woo-Sync

A helper for React/Mobx project.

It provides more handy way to access values in Mobx store from your <Component />.

Installation

$ yarn add woo-sync

Or

$ npm install woo-sync

Usage

The woo-sync package contains two separete packages SyncProvider and syncData

SyncProvider

Initially the React tree should be wrapped with SyncProvider.

SyncProvider is a wrapper component which passes store through context to all children components.

import React from 'react';
import ReactDOM from 'react-dom';
import { SyncProvider } from 'woo-sync';

import store from '../mobx-store';
import MyComponent from '../MyComponent';

const App = () => (
   <SyncProvider store={store}>
    <MyComponent />
   </SyncProvider>
);


ReactDOM.render(<App />, node);

syncData

To pass needed store values to <MyComponent /> we need to use syncData HOC component to wrap <MyComponent />.

import { syncData } from 'woo-sync';

const MyComponent = (props) => [
  <div>{props.name}</div>,
  <button onClick={props.changeName} type="button">Change name</button>
];

export default syncData({
  name: ['user', 'name'],
  changeName: ['user', 'changeName']
})(MyComponent);

Two ways of passing data to syncData is using plain object or callback function

Plain Object

syncData({
  name: ['user', 'name'],
  changeName: ['user', 'changeName']
})(MyComponent)

Callback function

syncData((props, state) => { // Arguments are current props and mobx store from context
  return {
    name: ['user', 'name'],
    changeName: ['user', 'changeName']
  };
})(MyComponent)

Mobx store looks like this :point_down:

import { action, computed, observable } from 'mobx';

class User {
  @observable username = null;
  
  @action changeName() {
    this.username = 'John';
  }
  
  @computed get name() {
    return this.username;
  }
}

export default { // will be passed as a prop to SyncProvider
  user: new User()
};

:bear: :tiger: :octopus: :snail: :squirrel: