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.

Great post on this topic by the author of Redux

Work your way up

https://github.com/reactjs/redux/tree/master/examples

Workshop React+Redux 7.0

By Tarun Sharma