Eduardo Luz Eduardo Luz - 29 days ago 8
React JSX Question

It's necessary to connect every React Component with redux even when using Provider?

My app index start with:

ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Main} />
<Route path="/search" component={MovieSearch} />
<Route path="/movies" component={MovieList} />
</Route>
</Router>
</Provider>,
document.getElementById('root')
);


My Main.js:

render() { return (<div>{this.props.children}</div> )}


When I access URI: /movies MovieList props stay undefined until I connect the component to the store. Is this correct? I need to connect every component to the store to access state? I can't get props from Main parent props without this?

I really need to call mapStateToProps and sometimes mapDispatchToProps to access state and actions ?

This is the default/good practice?

Answer

The answer is, Yes

Unless you have a layout component, you need to connect each component to work with redux.

You can take a look at one of my project. I used page.js as my router. It is very simple and solves my purpose. For every route, I pass the name of the component to be rendered. So, a layout page will be loaded where I connect redux and pass the state as props to the child components. And based on the render passed by the router. I will render the component inside the layout.

Using layout is a very good practice. It becomes a common place where all your components gets rendered.

Useful links:

Comments