https://github.com/link-intersystems/react-redux-plugin-architecture

A React Redux plugin architecture example that uses dynamic imports to load plugins and uses separate RenderDOM for each plugin.
https://github.com/link-intersystems/react-redux-plugin-architecture

Last synced: 4 months ago
JSON representation

A React Redux plugin architecture example that uses dynamic imports to load plugins and uses separate RenderDOM for each plugin.

• Host: GitHub
• URL: https://github.com/link-intersystems/react-redux-plugin-architecture
• Owner: link-intersystems
• License: mit
• Created: 2021-09-26T05:13:45.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2021-09-28T06:46:13.000Z (almost 5 years ago)
• Last Synced: 2025-01-01T06:14:04.811Z (over 1 year ago)
• Language: JavaScript
• Size: 351 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
This repository is an architecture proposal for plugin architectures in JavaScript. Even though it is implemented with a pure React and and React-Redux plugin app, the concepts can be applied to any JavaScript application.

# Goal

The goal of a plugin architecture is to add features to an application without modifying it. Therefore each plugin architecture honors the open-close principle.

# Structure

## [src/index.js](src/index.js)

The entry point runs the configured plugins.

    import run from "./app/reactPluginRunner";

    const pluginPaths = [

      "plugins/counter/CounterPlugin",

      "plugins/jsonplaceholder/Plugin"

    ];

    run(pluginPaths);

## Plugin description

Each plugin path points to a module with a plugin default export that contains the plugin id, the mainComponent and optionally a reducer.

    const plugin = {

      id: "counter",

      mainComponent: ,

      reducer: counterReducer

    };

    export default plugin;

If a plugin contains a reducer, it is configured under the id of the plugin. The plugin's id is used as the Redux slice's name.

The main component will be rendered in the [public/index.html](public/index.html) under the element with that id. E.g.

    


# RUN

Install all node modules with `npm install` then start the application with

    npm start

## Codesandbox

A running example can be found at [codesandbox.io](https://codesandbox.io/s/react-redux-plugin-architecture-jktd8)