Plugins Architecture
MapStore fully embraces both ReactJS and Redux concepts, enhancing them with the plugin concept.
A plugin in MapStore is a smart ReactJS component that is:
- connected to a Redux store, so that some properties are automatically wired to the standard MapStore state
- wired to standard actions for common events
In addition a plugin:
- declares some reducers that need to be added to the Redux store, if needed
- declares some epics that need to be added to the redux-observable middleare, if needed
- is fully configurable to be easily customized to a certain level
Building an application using plugins
To use plugins you need to:
- declare available (required) plugins, properly requiring them from the root application component
- load / declare plugins configuration
- create a store that dynamically includes plugins required reducers
- use a PluginsContainer component as the container for your plugins enabled application slice (can be the whole application or just a part of it)
Declare available plugins
Create a plugins.js file where you declare all the needed plugins:
plugins.js:
1 2 3 4 5 6 |
|
Load / Create plugins configuration object
Use pluginsConfig.json to configure your plugins.
pluginsConfig.json:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
Declare a plugins compatible Redux Store
Create a store that properly initializes plugins reducers and epics (see standardStore.js) :
store.js:
1 2 3 4 5 6 7 8 9 |
|
Use a PluginContainer to render all your plugins
In the root application component require plugins declaration and configuration and use them to initialize both the store and a PluginsContainer (see our PluginContainer.jsx):
App.jsx:
1 2 3 4 5 6 7 8 |
|
Developing a plugin
An example is better than a thousand words:
My.jsx:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|