For example:
In Link.js
class Link extends React.Component {
...
}
export default Link
In LinkContainer.js
import { connect } from 'react-redux'
import Link from './Link'
const mapStateToProps = (state, ownProps) => {
return {
data: state.data
}
}
const LinkContainer = connect(
mapStateToProps
)(Link)
export default LinkContainer
In App.js. I have a onClick method to render Link on the fly.
class App extends React.Component {
...
onClick() {
ReactDOM.render(<LinkContainer />,document.getElementById('link1')) //It doesn't work
// ReactDOM.render(<Link />,document.getElementById('link1')) //It works
}
}
When i render container the error happened
Uncaught Invariant Violation: Could not find "store" in either the context or props of "Connect(Link)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(Link)
You forgot to set up your store.
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import reducer from './redux/reducers/reducer'; // Import your rootReducer here
const store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<LinkContainer />
</Provider>,
document.getElementById('Link1')
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With