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:
@@ -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)
|
||||||
|
|||||||
@@ -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")
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user