Baobab Provider
Baobab Provider helps you make universal applications with React and Baobab.
Installation
npm install --save baobab-provider
For node version lower 6:
var BaobabProvider = ;
Usage
Hint: For babel 6 install
babel-plugin-transform-decorators-legacy
Implement root of the Tree
// application.js ;;;;; ;; const reactRoot = windowdocument;const tree = user: id: 200 profile: name: 'Sergey' surname: 'Sova' age: 21 ; const routerRoot = <Provider tree=tree> <Router history=browserHistory> <Route path="/" component=ExampleComponent /> <Route path="/about" component=IndexAbout /> </Router> </Provider>; ReactDOM;
Create simple actions
// actions/profile.js ; // property should be named `fn`const updateProfile = ; const resetProfile = ;
Subscribe and fire action:
// components/ExampleComponent.js ;;; // Baobab.select('user', 'profile').get()@ // userProfile contains data from Baobab static propTypes = userProfile: PropTypesshape name: PropTypesstring surname: PropTypesstring age: PropTypesnumber isRequired ; { const upd = thisactionupdateProfile; // Fire action with params ; } { // Fire without storing action to variable thisactionresetProfile; } { const name surname age = thispropsuserProfile; return <div> <button onClick=thisreload>name surname age - Update</button> <button onClick=thisreset>Reset</button> </div> ; }
Run action without subscribe
// containers/IndexAbout.js;;; @provide /** * Render component IndexAbout */ { return <div> <h3>IndexAbout</h3> <button onClick= thisactionupdateProfile name: 'Argh' surname: 'Roror' age: 561 >Set profile from another component</button> </div> ; }
Use baobab provider without decorators
// Subscribe {}ExampleComponent'user.profile'; // Provide {}IndexAbout;
Multi subscribes
@ static propTypes = userProfile: PropTypesobject settingsOpened: PropTypesobject
Roadmap
- Add build tools
- Write universal examples
- Optimize code