Dynamic (re)configuration

2 minutes read

Applies to 1.1.x

The store manager of the "hypereact" state library provides convenient methods to dynamically configure the state slices and reducers at runtime. There are different scenarios that might require to remove one or more slices based on the features that active or used in a specific moment or that can be lazy loaded based on micro-frontend configuration and user flow.

The support for dynamically reconfiguration is allowed through:

  • "getInstance" function reconfiguration by passing a new "IReduxConfig" object
  • "addReducer" and "removeReducer" functions that are used by other libraries of the "hypereact" framework

Update instance with new configuration

After initial instancing of the store manager, the static "getInstance" function can be used to pass an updated configuration object (that implements the "IReduxConfig" interface as usual). The current instance will be updated accordingly to the new configuration in the following order:

  1. missing slices and related reducers are be removed (and eventually persisted)
  2. new slices and related reducers are added and initialized (honoring the eventual hydration)

Pay attention the replacement of a reducer for a slice is not supported (but can be done with removal followed by an addition).

const initialReduxConfig: IReduxConfig = {
  login: loginReducer

const updatedReduxConfig: IReduxConfig = {
  profile: userReducer,
  home: homeReducer

// initialize store and configure Redux
(in the example with only one "login" slice)
const storeManager = StoreManager.getInstance(initialReduxConfig);

// get the store manager instance
const storeManager = StoreManager.getInstance();

// get the store manager instance after reconfiguring Redux
// (in the example the "login" slice is removed and the new "profile" and "home" slices are initialized)
const storeManager = StoreManager.getInstance(updatedReduxConfig);

Programmatically add/remove reducers

At runtime each slice of the root state, with respective reducer, can be removed or added when needed. Both the removal and the addition of persistence-enabled slices are handled properly thus the hydration flows are honored.

// get the already initialized store or initialize an empty store
const storeManager = StoreManager.getInstance();

// add a "login" slice backed by a login reducer
storeManager.addReducer("login", loginReducer);

// remove the "login" slice and related reducer

// get list of slices (as array of strings) and check if login slice is defined

Internal "management" action types

When the store manager reconfigured the store and state "management" actions are dispatched against the Redux reducers with the following types:

  • @@REDUCER_REMOVE: dispatched when a reducer is removed
  • @@REDUCER_ADD: dispatched when a new reducer is added

Both actions are also sent with a property "key" set to the slice name that has been removed or added.