@bosscat/redux-dynamic-reducer v1.2.0

redux-dynamic-reducer

Dynamically load reducers in a code-split app.

Table of Content

• Basic Usage
• Server Side Rendering
• Typescript
• License

Basic Usage

1. Create a root reducer

import { connectRouter } from "connected-react-router";
import { createBrowserHistory } from "history";

export default function createRootReducer() {
  return {
    router: connectRouter(createBrowserHistory())
    // ... other reducers that are needed globally
  };
}

2. Setup reducer registry

import { ReducerRegistry } from "@bosscat/react-dynamic-reducer";

const rootReducer = createRootReducer();
const reducerRegistry = new ReducerRegistry(rootReducer);

3. Configure Redux store

import { combineDynamicReducers } from "@bosscat/react-dynamic-reducer";

export default function configureStore(reducerRegistry) {
  // ... put middlewares here
  const middlewares = [];
  const enhancers = [applyMiddleware(...middlewares)];

  const store = createStore(
    combineDynamicReducers(reducerRegistry.getReducers(), preloadedState),
    preloadedState,
    composeEnhancers(...enhancers)
  );

  reducerRegistry.setChangeListener(updatedReducers => {
    store.replaceReducer(
      combineDynamicReducers(updatedReducers, store.getState())
    );
  });
}

4. Dynamically load reducers

import React from "react";
import { useInjectReducer } from "@bosscat/react-dynamic-reducer";
import counterReducer from "./counterReducer";

export default function About() {
  useInjectReducer({ counter: counterReducer });

  return <h1>About</h1>;
}

Server Side Rendering

SSR is supported. No additional steps needed.

Typescript

This library is written in Typescript. Types are provided.

License

This library is MIT licensed.