Mantra Phoenix: Mantra Architecture extended to work with MobX 3+ and Meteor 1.5+
Mantra Phoenix deprecates old dependencies like React komposer 1.x in favor of Mobdux, a library that uses MobX and mobx-react under the hood in order to bind MobX stores to dumb components in a Redux manner.
You can start Mantra apps as usual, with the difference that you can now add a Mobx store to the context
object (by just exporting the store on module initialization) and it will be available on Containers files.
Installation
npm i --save mantrax
In order to sync with a Meteor Collection, use alongside vladejs:tracker-mobx-autorun package.
App API
App initialization
// client/main.js;; // modules;; // init contextconst context = ; // create appconst app = ; // load modulesapp;app;app;
Module creation
// client/imports/modules/core/index.js ;; // MobX Stores: Will be available on context.stores automatically; // Functions that automatically syncs MongoDB collections with the Mobx store// Will be available under context.autoruns (see implementation below); routes stores actions autoruns { console; console; console; };
Containers definition
// client/imports/modules/core/containers/todos.js ; ; const fromActionsToProps = { // Container gets a subscription to DB here // that automatically syncs with a mobx store's value. // This is created using vladejs:tracker-mobx-autorun package const Collection = 'Todos'; const subTo = 'todos.all'; // subscription will save the Collection's data here const target = contextstorescoretodos; const subToOptions = {}; const selector = {}; const options = {}; // context.autoruns.create is a Generic function that subscribes // to publications and has many params in order to avoid code duplication // see the implementation below const todosAutorun = contextautoruns; return // Dumb component will receive this goAbout: actionsroutesgoAbout // and this insertTodo: actionstodosinsertTodo // but not this, because its needed only by the parent container (which starts and stops them automatically) autoruns: todosAutorun ;}; const fromStoresToProps = // Todos from MobX synced with publication via autorun.create todos: storescoretodos // a computed function from the MobX store hasTodos: storescorehasTodos; fromActionsToProps fromStoresToPropsHomeTodos;
Generic MobX-Publication Subscriber
// client/imports/modules/core/autoruns/create.js; Meteor Collections // the context object, passed automatically as first param CollectionName = 'Unknown' // mandatory subTo = 'todos.list' // mandatory target // mandatory subToOptions selector = {} options = {} findType = 'find' // findOne, find... const reactiveFn = { let handle; if subToOptions handle = Meteor; else handle = Meteor; const cursor = CollectionsCollectionNamefindTypeselector options; console; ; }; // MantraX gets this fn and apply .start(), .stop() methods for you return ;;
A simple MobX store
// client/imports/modules/core/stores/todos.js; todos: { thistodoslength > 0 };
Takeaways
- Minimal re-renders out of the box thanks to MobX.
- Automatic sync between MobX stores and Database data.
HomeTodos
component will get 4 props: 2 actions and 2 store's values.todos
value is automatically filled from a Meteor subscription created onautoruns
folder.- The autoruns that you create on Containers are automatically started|stoped whenever the Component is Created|Destroyed
- The Dumb component
HomeTodos
doesn't know aboutmobx-react
(doesn't need the @observer decorator). - If you know connect API from Redux you know MantraX.
See CHANGELOG.md
to see the list of changes.
Please feel free to report bugs/feedback/questions/[put your term here] related to Mantra Phoenix.