Redux Micro Frontend
This is a library for using Redux to manage state for self-contained apps in a Micro-Frontend architecture. Each self-contained isolated app can have its own isolated and decoupled Redux store. The componentized stores interact with a global store for enabling cross-application communication.
Overview
The Redux Micro-Frontend library is designed for use in a Micro Frontend architecture. Micro Frontends involve breaking up a monolithic Frontend application into smaller, decoupled applications, each with its own isolated store. Redux is a popular library for state management, but using a single store in a Micro Frontend architecture violates the principle of isolation. The Redux Micro-Frontend library introduces the concept of a Global Store, which is a virtual collection of multiple isolated Redux Stores. This allows each Micro Frontend to have its own store while still being able to see the state of other Micro Frontends.
Features
- Micro Frontend Architecture: Enables the use of Redux in a Micro Frontend based architecture.
- Global Store: Introduces a virtual collection of isolated Redux Stores to provide isolation and cross-application communication.
- Individual Redux Stores: Each Micro Frontend can have its own Redux Store.
- Global State: The Global Store projects a Global State, combining the state from all the individual Stores.
- Isolation: Each Micro Frontend can see the state from other Micro Frontends but cannot modify them.
- Actions: Actions dispatched by an app are confined to the store registered by the app and not dispatched to other stores.
Summary
The Redux Micro-Frontend library allows for the use of Redux in a Micro Frontend architecture by introducing the concept of a Global Store. This virtual collection of isolated Redux Stores enables each Micro Frontend to have its own store while still being able to access the state of other Micro Frontends. By providing isolation and cross-application communication, the library helps to maintain the principles of the Micro Frontend architecture.
- Redux
Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.