Dependency Injection
We recommend using React's new context API for dependency injection, because it is perfect for passing information through to any arbitrary child within your app.
However, it needs a little work for it to play nicely with higher-order components.
Setting up React Context
Consider the following example, using vanilla React context:
1
import { createContext } from 'react'
2
3
export default createContext()
Copied!
1
import { Provider } from 'redux'
2
import { withEffects } from 'refract-rxjs'
3
4
import RefractContext from './refractContext'
5
import configureStore from './configureStore'
6
import App from './components/App'
7
8
const store = configureStore()
9
10
ReactDOM.render(
11
<Provider store={store}>
12
<RefractContext.Provider value={{ store }}>
13
<App />
14
</RefractContext.Provider>
15
</Provider>,
16
document.getElementById('root')
17
)
Copied!
Passing context to withEffects
withEffectsWith React version 16.6.0 and above, you can pass your React context to
withEffects. For more information about it, you can look at withEffects API and React class.contextType.1
import { withEffects } from 'refract-rxjs'
2
3
const MyComponent = props => <Foo {...props} />
4
5
export default withEffects(aperture, {
6
handler,
7
errorHandler,
8
Context
9
})(MyComponent)
Copied!
handler, errorHandler and aperture will then be called with two arguments:initialProps: the component props when your component is instantiatedinitialContext: the value ofContextwhen your component is instantiated
Passing context to props
If you are not using React 16.6.0 and above, you can fallback to passing your context as props and it will be available via
initialProps:1
import { withEffects } from 'refract-rxjs'
2
3
const MyComponent = props => <Foo {...props} />
4
5
export default withEffects(aperture, { handler })(MyComponent)
Copied!
1
import MyComponent from './MyComponent' // includes effects, but no context
2
import RefractContext from './refractContext'
3
4
const MyView = props => (
5
<RefractContext.Consumer>
6
{dependencies => <MyComponent {...dependencies} {...props} />}
7
</RefractContext.Consumer>
8
)
Copied!
This code successfully puts dependencies into context and pulls them out again where needed, but it's not a particularly nice pattern. It's a pain to have to import the context and the component separately, and manually pass the dependencies through.
Thankfully, there's a solution for this!
Using Context With react-zap
react-zapWe recommend using another tiny library,
react-zap, which lets you consume React context directly via higher-order components.At first glance, it might seem obvious to do this:
1
import { withEffects } from 'refract-rxjs'
2
import { contextToProps } from 'react-zap'
3
4
import RefractContext from './refractContext'
5
6
const MyComponent = props => <Foo {...props} />
7
8
export default contextToProps(RefractContext.Consumer)(
9
withEffects(aperture, { handler })(MyComponent)
10
)
Copied!
1
import MyComponent from './MyComponent' // includes effects AND context
2
3
const MyView = props => <MyComponent {...props} />
Copied!
Which is definitely a lot nicer!
But we can do better - instead of importing and connecting our Refract context every time we use
withEffects, we can enhance the default withEffects HoC by wrapping it with our context once in a sideEffects.js file:1
import { createContext } from 'react'
2
import { withEffects, compose } from 'refract-rxjs'
3
import { contextToProps } from 'react-zap'
4
5
const RefractContext = createContext()
6
7
const enhancedWithEffects = (aperture, { handler, errorHandler }) => BaseComponent =>
8
compose(
9
contextToProps(RefractContext.Consumer),
10
withEffects(aperture, { handler, errorHandler })
11
)(BaseComponent)
12
13
export {
14
RefractProvider: RefractContext.Provider
15
withEffects: enhancedWithEffects
16
}
Copied!
We would now import this enhanced version instead of the plain one whenever creating a component with side-effects:
1
import { withEffects } from './sideEffects'
2
3
const MyComponent = props => <Foo {...props} />
4
5
export default withEffects(aperture, { handler })(MyComponent) // now includes dependencies!
Copied!
Last modified 3yr ago