A project for dependency injecting Signal Graphs into components. Builds on top of @rxreact/core.
In your project:
npm install @rxreact/jest-helpers --save
yarn add @rxreact/jest-helpers
RxJS and Jest are peer dependencies and need to be installed separately.
Then import the library:
This library is patterned after Redux, where you have a global store for data and business logic, and individual components can connect to that store, add their own local business logic, then inject the results into components for rendering.
Like with Redux, in testing you may wrap a tree of components with a Provider to inject mock versions of your global store.
You can see a full working sample application here.
Setup Global Store
To set up the
rxreact/context store, you will need a few pieces: a global
SignalGraphContext, and to add the
SignalGraphProvider to your
// src/signals/signal-graph.ts;;// For typescript, export a type for use by viewModelFactories;/** A function to generate the global signal graph */;
// src/signals/SignalGraphContext.ts;;// Generate and export a context and provider for the graph;
Connect to store with components
;;;;;;// Set up an interface for your normal props// Set up a different interface for props passed in from the viewModelFactory (this makes typing the viewModelFactory easier)// Your component takes both interfaces as props;// Create (and export for testing) a viewModelFactory that has the signal graph dependency injected into it.;// Default export the connected component, passing in the SignalGraphContext so we know which graph to connect to.;