Install
You can install Deviation by either using PNPM, Yarn or NPM:
# PNPM $ pnpm add deviation # Yarn $ yarn add deviation # NPM $ npm add deviation
What is Deviation?
Deviation is a library that trying to simulate Angular DI model into React using RxJS and React Context API. Here is our example:
import Deviation Store Inject from 'deviation' state = todos: { this } ReactDOM @Component { thispropstodoStore } { const todoStore = thisprops return <div> <ul> todoStorestatetodos </ul> <div> <label ="new-todo">New Todo:</label> <input ="new-todo" ="input" = /> </div> </div> }
Store DI
We can also use DI to inject directly store into store:
@
Remember, stores are injected in order. For example:
ReactDOM
In this example, BalanceStore
will be injected before ContractStore
. However, if ContractStore
is placed behind BalanceStore
in the list of providers: [BalanceStore, ContractStore]
, then after ContractStore
constructor is called and before storeDidMount
is called, BalanceStore
will be injected into ContractStore
.
Lazy DI and Cyclic DI
Sometimes, you may need Cyclic Dependency Injection. Deviation also provides you with Cyclic DI:
@ { return thispropsstoreA } @ { return thispropsstoreB }
Testing
To test on a single Store method is easy. You just have to stub or spy on that method:
{} const spy = sinontobetrue
However, we are more likely to extract the store instance from the providers. In that case, we can create a store extractor that can help us to extract any store instance from Deviation
:
import createStoreExtractor from 'deviation' const Extractor = const phoneStore = Extractor