Learning Redux

Separating the header

First of all, we will put the header in a separate component. That way, we can connect the Header component and inject the session substate as a property.

Let's take a look at our App component. The parts in bold will be put into a separate Header component:

const App = ({ store }) =>  <Provider store={store}>    <div>      <h1>React/Redux blog</h1>      <div><ConnectedLoading /></div>      <div><ConnectedErrorMessage /></div>      <hr />      <div><ConnectedRegistration /></div>      <div><ConnectedLogin /></div>      <br />      <div><ConnectedCreatePost /></div>      <hr />      <div><ConnectedFilterList /></div>      <div><ConnectedPostList /></div>      { (process.env.NODE_ENV !== 'production') && <DevTools /> }    </div>  </Provider>

We are now going to start separating out the ...