ReModelProvider

The ReModelProvider component sets up the Redux store and RxJS middleware for the application. It initializes the reducers, epics, and middleware, providing a fully configured store to the React application through the Provider from react-redux.

Importing

To use the ReModelProvider, import it from @blue-functor/remodel:

import { ReModelProvider } from '@blue-functor/remodel';

Props

Prop	Type	Required	Description
`children`	`React.ReactNode`	Yes	The React component tree that requires access to the Redux store and RxJS logic. Passed as a child to the `Provider`.
`model`	`ModelProps`	Yes	Object containing reducers, epics, and optional middleware for configuring the store.
`model.reducers`	`Record<string, Reducer>`	Yes	A mapping of reducer names to their respective reducer functions.
`model.epics`	`Record<string, Epic>`	Yes	A mapping of epic names to their respective epic functions, handling side effects and asynchronous workflows.
`model.middleware`	`Middleware[]`	No	Additional Redux middleware to include in the store.
`options`	`Record<string, any>`	No	A generic object for providing additional dependencies to epics. These options are passed to the epics via the `dependencies` argument in `createEpicMiddleware`.
`initialState`	`Record<string, any>`	No	The initial state of the Redux store (default: `{}`). Use this to prepopulate the store with data at initialization.
`persistState`	`boolean`	No	Determines whether the state should be persisted. (This parameter is included for potential future enhancements but is not yet implemented in the provided code.)

Example Usage

src/App.tsx

import React from 'react';
import { ReModelProvider } from '@blue-functor/remodel';
import model from './models';
 
const App = () => {
  return (
    <ReModelProvider model={model} initialState={{ user: { loggedIn: true } }}>
      <div>
        <h1>Welcome to ReModel</h1>
      </div>
    </ReModelProvider>
  );
};
 
export default App;

How It Works

Redux Store Initialization:

Combines model.reducers with the effect reducer using combineReducers.
Configures createEpicMiddleware with dependencies, including options and a custom dispatch method.

Epic Management:

The epicManager initializes and manages the provided model.epics.
Executes the root epic with the epicMiddleware.

Middleware Integration:

Combines epicMiddleware with any additional middleware from model.middleware.

Context Provision:

Provides the fully configured Redux store to the React component tree using the Provider from react-redux.

System Epics

The ReModelProvider includes system epics that handle the following functionalities:

Model Injection: Dynamically injects new models (reducers and epics) into the store as needed.
Loading Tracking: Automatically tracks the lifecycle of effect actions, making it easier to manage and monitor loading states.

This component streamlines the integration of Redux and RxJS, offering a scalable, modular solution for state and side effect management, with built-in enhancements for dynamic model management and effect-state tracking.

generateScopedActions withProps