1.0.29 • Published 6 years ago
woo-sync v1.0.29
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: