How to render Redux Container in ReactDOM.render method

Question

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)

QoP QoP · Accepted Answer · 2016-05-17T07:38:07

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')
);

How to render Redux Container in ReactDOM.render method

1 Answers