Ensure that connected containers get a System in mapStateToProps props

This will allow us to avoid system utility handaround in
connected containers.
This commit is contained in:
Kyle Shockey
2017-11-16 20:16:45 -08:00
parent 7624d6b5fc
commit 2ce199c151
2 changed files with 58 additions and 2 deletions

View File

@@ -20,9 +20,12 @@ const RootWrapper = (reduxStore, ComponentToWrap) => class extends Component {
} }
const makeContainer = (getSystem, component, reduxStore) => { const makeContainer = (getSystem, component, reduxStore) => {
const mapStateToProps = component.prototype.mapStateToProps || function(state) { const mapStateToProps = function(state, ownProps) {
return {state} const propsForContainerComponent = Object.assign({}, ownProps, getSystem())
const ori = component.prototype.mapStateToProps || (state => state.toJS())
return ori(state, propsForContainerComponent)
} }
let wrappedWithSystem = SystemWrapper(getSystem, component, reduxStore) let wrappedWithSystem = SystemWrapper(getSystem, component, reduxStore)
let connected = connect( mapStateToProps )(wrappedWithSystem) let connected = connect( mapStateToProps )(wrappedWithSystem)
if(reduxStore) if(reduxStore)

View File

@@ -518,6 +518,59 @@ describe("bound system", function(){
// Then // Then
expect(renderedComponent.text()).toEqual("This came from mapStateToProps and this came from the system and this came from my own props") expect(renderedComponent.text()).toEqual("This came from mapStateToProps and this came from the system and this came from my own props")
}) })
it("gives the system and own props as props to a container's `mapStateToProps` function", function() {
// Given
class ContainerComponent extends PureComponent {
mapStateToProps(nextState, props) {
const { exampleSelectors, fromMapState, fromOwnProps } = props
return {
"fromMapState": `This came from mapStateToProps ${exampleSelectors.foo()} ${fromOwnProps}`
}
}
static defaultProps = {
"fromMapState" : ""
}
render() {
const { fromMapState } = this.props
return (
<div>{ fromMapState }</div>
)
}
}
const system = new System({
plugins: [
ViewPlugin,
{
components: {
ContainerComponent
}
},
{
statePlugins: {
example: {
selectors: {
foo() { return "and this came from the system" }
}
}
}
}
]
})
// When
var Component = system.getSystem().getComponent("ContainerComponent", true)
const renderedComponent = render(
<Provider store={system.getStore()}>
<Component fromOwnProps="and this came from my own props" />
</Provider>
)
// Then
expect(renderedComponent.text()).toEqual("This came from mapStateToProps and this came from the system and this came from my own props")
})
}) })
}) })