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

0
votes

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?

1
reactjsreduxreact-router

1 Answers

1
votes

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:

[Update]

You should also take a look at Redux Router