As you can see, whatever is nested between the start and ending tag of our Layout component, is rendered within the component using {this.props.children} allowing us to wrap our app layout around the content.

To test this is working navigate to /about and / and you should see the title h1 on both pages

One final thing is to add some basic navigation links into the Layout file using the react router Link component

At the moment you will see that the data within our NewsItemDetail is just the sample data, to sort this we will now introduce some application state management through using React Redux

1.4 Redux integration and state management

Before integrating React-redux it is worthwhile quickly explaining Flux.

Flux is an architecture used by Facebook when they are working with React. The components of this architecture are:

Actions - These are methods which send data to the dispatcher

Dispatcher - This receives the actions and then sends the payloads of the actions to all the registered callback functions

Stores - These contain the application state, usually separated into the different domains of your application

Views - The views listen for the state changes and pass it on to their child components

Together they work as follows:

The user interacts with the view. This triggers an action. The action goes to the dispatcher which then invokes a corresponding function. This function changes the data in the store. Upon the store altering, the views are notified, these then update themselves and their childs. This is called a unidirectional data flow.

Redux is an evolution of this architecture.

It follows three principles:

Single source of truth - The state for the entire application is in a single store.

State is read only - The only way to change state is to dispatch an action which will result in the state changing.

Changes are made with pure functions - These pure functions transform the state and are called reducers.

In summary - actions are dispatched, reducers take the actions and based on them modify the application state. Views listen to this state change and alter accordingly.

–

To begin, install redux

npm install redux react-redux redux-thunk --save

Our objective here will be to create the state which hold our news items, make our News component dynamically list news items based on that state, and then have a NewsItemDetail page show the state of that news item.

To begin we will create some actions

Create 2 folders within src, src/actions and also src/constants. Within the constants folder lets create actionTypes.js containing the following:

As you can see we have an initial state, which is an empty array of news items. The reducer then looks at the action which has been dispatched and
if it is the NEWS_RECEIVED action, sets the news state to be the passed in news collection, and returns the updated state.

Next we need to integrate the store with our application. To this we need to edit /src/app.js

You’ll see that we also altered the validation of the props, using PropTypes.shape to check the structure of our data

When we run this we see..

In order so that it handles there being no news, lets change /src/containers/News.js slightly

importReact,{Component}from'react';importNewsItemListingfrom'../presentation/NewsItemListing';import{connect}from'react-redux'classNewsextendsComponent{render(){constnewsItems=this.props.news.map((news,i)=>{return(<likey={i}><NewsItemListingdata={news}/></li>);});return(<div><h2>NewsItems</h2>
{(this.props.news.length>0)?<ul>{newsItems}</ul> : <div>Sorry we have no news</div>}</div>
)}}...

When no news is present it should now show a friendly message

Ok, the next step is to actually get some news. Lets create a new function in /src/actions/actions.js

Before we edit NewsItemDetail, we will add a new container. Within /src/containers/ create a new file NewsArticle.js

This will be the container responsible for displaying our NewsItemDetail component, along with other features we may add further on such as related news stories or comments.

NewsArticle.js

importReact,{Component}from'react';importNewsItemDetailfrom'../presentation/NewsItemDetail';import{connect}from'react-redux'import{fetchNewsItem}from'../../actions/actions'classNewsArticleextendsComponent{componentDidMount(){varfakeNewsItem={id:'1',title:'Mad owl chases car',teaser:'Mad owl seen tormenting drivers in Morecambe',body:`Morecambe - Tuesday 8th August 2017
Yesterday evening motorists were left running for their lives as a mad owl began a campaign of terror on rush traffic.
Eye Witness, Eric Barnes said "When I heard it Squawk in the sky above me, I thought I was done for"`};this.props.dispatch(fetchNewsItem(fakeNewsItem));}render(){let{newsItem}=this.props;return(<div><h2>NewsStory</h2>
<ul>{newsItem?<NewsItemDetaildata={newsItem}/> : null}
</ul>
</div>
)}}constmapStateToProps=state=>{return{newsItem:state.news.newsItem}}exportdefaultconnect(mapStateToProps)(NewsArticle)

This works similar to the News.js container, except that it fetches and displays a single news Item

To use this new NewsArticle container we’ll need to alter our routing in /src/App.js