React app with Redux
<App /><Nav /><Nav Item /><Nav Item /><Nav Item /><Header /><Gallery /><Image /><Image /><Image /><Image />import { Component } from 'react'
import Nav from '../nav'
import Header from '../header'
import Gallery from '../gallery'
let images = [
{
caption: 'This is a butterfly',
url: 'http://pictures.com/butterfly'
},
{
caption: 'This is a tiger',
url: 'http://pictures.com/tiger'
}
]
class App extends Component {
render() {
return (
<div>
<Nav />
<Header />
<Gallery images={ images } />
</div>
)
}
}component
import { Component, PropTypes } from 'react'
class Gallery extends Component {
static propTypes = {
images: PropTypes.array.isRequired
}
render() {
let galleryElements = this.props.images.map(image => {
return (
<img src={ image.url } />
<span>{ image.caption }</span>
)
})
return (
<div>
{ galleryElements }
</div>
)
}
}child component
class ReactComponent {
componentWillMount() {
// when the component is about to add to the DOM
}
componentDidMount() {
// when the component has mounted to the DOM
}
componentWillReceiveProps(nextProps) {
// when the component will receive updated properties from parent
}
componentWillUnmount() {
// when the component is removed from the DOM
}
render() {
// this returns what is rendered to the DOM
}
}life cycle methods
Redux
actions
reducer
state
react app
middleware
Actions
are fired by user interaction or server events to signal that the application state may need to change
Middleware
are involved through actions and typically involve making a server call, calling a library, logging
Reducers
observe actions and modify state according to the action type and its payload
import { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { addImage } from '../../actions'
import Gallery from '../gallery'
class App extends Component {
static propTypes = {
images: PropTypes.array.isRequired
}
handleAddImage = () => {
this.props.onImageAdd({ caption: 'This is a snake', url: 'http://picture.com/snake'})
render() {
return (
<Gallery images={ this.props.images } />
<button onclick={ this.handleAddImage }>Add another</button>
)
)
}
const mapStateToProps = (state) => {
return {
images: state.images
}
}
const mapDispatchToProps = (dispatch) => {
return {
onImageAdd: (image) => {
dispatch(addImage(image))
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App) connecting redux to react
The application state is managed by redux. This includes shopping cart items, messages in a chat app, authentication state. The redux state will persist upon navigation, but will be cleared on page refresh.
UI specific states that do not need to persist upon navigation or component unmounting can be saved in the react component state.
connect()connect()The nodes represent react components. The highlighted nodes are populated by redux and are referred to as containers. They pass information through props down to child components (presentational components).
Redux actions can be fired from any component, but in order to maximize component modularity and reusability, it is good practice to pass callbacks down to presentational components.