Git Product home page Git Product logo

dynux's Introduction

dynux

npm GitHub Workflow Status npm NPM

Dynamic redux reducer injection. Allows you to reduce the size of your bundle by dynamically loading and registering reducers on your Redux store. It is compatible with Redux Toolkit.

Test coverage

Statements Branches Functions Lines
Statements Branches Functions Lines

Configuration

With Redux

import { ReducerManager } from "dynux";
import { createStore, Reducer } from "redux";

const someReducer: Reducer = (state = null) => state;
const initialReducers = {
  someReducer,
};

const configureStore = () => {
  // Optionally initialize with static reducers
  const reducerManager = new ReducerManager(initialReducers);

  // Create a store with the root reducer
  const store = createStore(reducerManager.reduce);

  // Bind the store to the manager
  reducerManager.bindStore(store);

  // Optionally put the reducer manager on the store so it is easily accessible
  store.reducerManager = reducerManager;
};

With Redux Toolkit

import { ReducerManager } from "dynux";
import { Reducer } from "redux";
import { configureStore } from "@reduxjs/toolkit";

const someReducer: Reducer = (state = null) => state;
const initialReducers = {
  someReducer,
};

const configureStore = () => {
  // Optionally initialize with static reducers
  const reducerManager = new ReducerManager(initialReducers);

  // Create a store with the root reducer
  const store = configureStore({ reducer: reducerManager.reduce });

  // Bind the store to the manager
  reducerManager.bindStore(store);

  // Optionally put the reducer manager on the store so it is easily accessible
  store.reducerManager = reducerManager;
};

Attaching the manager to store

The ReducerManager instance can be bound to your Redux store for easy access. If you are using TypeScript, include the dynux/augmentation file, which extends the store object with a reducerManager property.

import {} from "dynux/dist/types/augmentation";
import { ReducerManager } from "dynux";
import { setupStore } from "redux";

const reducerManager = new ReducerManager();
const store = setupStore(reducerManager.reduce);
reducerManager.bindStore(store);

// ts should not complain about this
store.reducerManager = reducerManager;

Usage

The exported ReducerManager class optionally accepts static reducers as a constructor argument. These reducers are always present on your store.

bindStore

Binds a Redux store to a ReducerManager instance.

const manager = new ReducerManager();

manager.bindStore(createStore(manager.reduce));

A different store can be rebound at any time, and all active reducers will be registered on the new store.

const newStore = createStore(manager.reduce);

manager.bindStore(newStore);

getReducerMap

Returns the reducers that are currently registered on the store.

hasReducer

Checks if a reducer is registered on the store.

manager.hasReducer("reducerKey");

reduce

Returns the combined reducers. Pass this to configureStore or setupStore.

add

Asynchronously adds a new reducer to the store. The reducer is identified by a unique key, which helps avoid duplicate reducers and provides a unique identification for each reducer.

manager.add("reducerKey", reducerImpl);

remove

Asynchronously removes a reducer from the store. You would rarely need to use this method unless you have a very large number of dynamic reducers.

manager.remove("reducerKey");

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.