All Projects → microsoft → Redux Dynamic Modules

microsoft / Redux Dynamic Modules

Licence: mit
Modularize Redux by dynamically loading reducers and middlewares.

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Redux Dynamic Modules

Reason Loadable
🔥 Suspense/Lazy for ReasonReact.
Stars: ✭ 88 (-89.93%)
Mutual labels:  code-splitting, dynamic
Reapex
A lightweight framework to build pluggable and extendable redux/react application
Stars: ✭ 58 (-93.36%)
Mutual labels:  sagas, reducer
Hr4r
Example project - "Hot Reloading 4 RequireJS" front-end web applications & some extra code demonstrating hot-reloading for Node.js Express servers
Stars: ✭ 28 (-96.8%)
Mutual labels:  code-splitting, dynamic
Redux Json Router
Declarative, Redux-first routing for React/Redux browser applications.
Stars: ✭ 37 (-95.77%)
Mutual labels:  middleware, code-splitting
isomorphic-react-redux-saga-ssr
Isomorphic, React, Redux, Saga, Server Side rendering, Hot Module Reloading, Ducks, Code Splitting
Stars: ✭ 19 (-97.83%)
Mutual labels:  modules, code-splitting
Redux Ecosystem Links
A categorized list of Redux-related addons, libraries, and utilities
Stars: ✭ 5,076 (+480.78%)
Mutual labels:  middleware, reducer
Webpack Require From
Webpack plugin that allows to configure path or URL for fetching dynamic imports
Stars: ✭ 142 (-83.75%)
Mutual labels:  code-splitting, dynamic
Redux Most
Most.js based middleware for Redux. Handle async actions with monadic streams & reactive programming.
Stars: ✭ 137 (-84.32%)
Mutual labels:  middleware, sagas
bs-dynamic-import
📦🚀 BuckleScript dynamic import interop on JavaScript environment
Stars: ✭ 31 (-96.45%)
Mutual labels:  dynamic, code-splitting
Repatch
Dispatch reducers
Stars: ✭ 516 (-40.96%)
Mutual labels:  middleware, reducer
Redux Saga
An alternative side effect model for Redux apps
Stars: ✭ 21,975 (+2414.3%)
Mutual labels:  middleware, sagas
Wrench
CakePHP 3 Maintenance Mode plugin
Stars: ✭ 26 (-97.03%)
Mutual labels:  middleware
Puddles
Tiny vdom app framework. Pure Redux. No boilerplate.
Stars: ✭ 24 (-97.25%)
Mutual labels:  reducer
Go Modiff
Command line tool for diffing go module dependency changes between versions 📔
Stars: ✭ 24 (-97.25%)
Mutual labels:  modules
Kona
a node.js service framework built on koa.js (generators)
Stars: ✭ 23 (-97.37%)
Mutual labels:  middleware
Dynamic widget
A Backend-Driven UI toolkit, build your dynamic UI with json, and the json format is very similar with flutter widget code.
Stars: ✭ 851 (-2.63%)
Mutual labels:  dynamic
Webpackery
Webpack 4 Orchestration Layer allows for automated async code splitting of anything
Stars: ✭ 26 (-97.03%)
Mutual labels:  code-splitting
Django Compression Middleware
Django middleware to compress responses using several algorithms.
Stars: ✭ 23 (-97.37%)
Mutual labels:  middleware
Honeybadger Node
A node.js notifier for honeybadger.io
Stars: ✭ 19 (-97.83%)
Mutual labels:  middleware
Modules
📦 Modules package for Laravel
Stars: ✭ 900 (+2.97%)
Mutual labels:  modules
logo

Redux Dynamic Modules

Pipelines npm (scoped) Join the chat at https://gitter.im/redux-dynamic-modules/community GitHub license

What is it?

redux-dynamic-modules is a library that aims to make Redux Reducers and middleware easy to modular-ize and add/remove dynamically.

Motivation

In large Javascript applications, it is often desired to perform some kind of code-splitting, so that the initial script size is small. However, in Redux, you are required to define your reducers and middleware up-front; there is no good way to dynamically add/remove these constructs at runtime.

redux-dynamic-modules is designed to make dynamically loading these constructs easier. You can define a module, which contains reducers and middleware, and add it to the Redux store at runtime. We also provide a React component DynamicModuleLoader, which can load/unload modules on mount/unmount.

Modules provide the following benefits:

  • Modules can be easily re-used across the application, or between multiple similar applications.
  • Components declare the modules needed by them and redux-dynamic-modules ensures that the module is loaded for the component.
  • Modules can be added/removed from the store dynamically, ex. when a component mounts or when a user performs an action

Features

  • Group together reducers, middleware, and state into a single, re-usable module.
  • Add and remove modules from a Redux store at any time.
  • Use the included <DynamicModuleLoader /> component to automatically add a module when a component is rendered
  • Extensions provide integration with popular libraries, including redux-saga and redux-thunk

Example Scenarios

  • You don't want to load the code for all your reducers up front. Define a module for some reducers and use DynamicModuleLoader and a library like react-loadable to download and add your module at runtime.
  • You have some common reducers/middleware that need to be re-used in different areas of your application. Define a module and easily include it in those areas.
  • You have a mono-repo that contains multiple applications which share similar state. Create a package containing some modules and re-use them across your applications

Install

Run

npm install redux-dynamic-modules

or

yarn add redux-dynamic-modules

Usage

  • Create a module with the following format
export function getUsersModule(): IModule<IUserState> {
    return {
        id: "users",
        reducerMap: {
            users: usersReducer,
        },
        // Actions to fire when this module is added/removed
        // initialActions: [],
        // finalActions: []
    };
}
  • Create a ModuleStore
import { createStore, IModuleStore } from "redux-dynamic-modules";
import { getUsersModule } from "./usersModule";

const store: IModuleStore<IState> = createStore({
      initialState: { /** initial state */ },
      enhancers: [ /** enhancers to include */ ], 
      extensions: [/** extensions to include i.e. getSagaExtension(), getThunkExtension() */],
},
    getUsersModule()
    /* ...any additional modules */
);
  • Use like a standard Redux store
  • Use the DynamicModuleLoader React component to add/remove modules when components mount/unmount
<DynamicModuleLoader modules={[getHelloWorldModule()]}>
    <div>Hello World!!</div>
</DynamicModuleLoader>

Extensions

Examples

See the Widgets for a quick of example of the library in practice.

Step by step walthrough of start consuming redux-dynamic-modules in the widget app. Youtube

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].