A Basic React + Redux introductory tutorial

actions-1.js

// reducer_active_contact.js
export default function(state = null, action) {
  switch (action.type) {
    case 'CONTACT_SELECTED':
      return action.payload
  } 
  // i dont care about the action because it is not inside my
  // list of actions I am interested int (case statements inside the switch)
  return state
}

actions-2.js

// actions/action_select_contact.js
function selectContact(contact) {
  return {
    type: 'CONTACT_SELECTED',
    payload: contact
  }
}
export default selectContact;

actions-3.js

// ... some other imports...
import selectContact from '../actions/action_select_contact'
import {bindActionCreators} from 'redux'
// The ContactList component goes here
// mapStateToProps is here
function mapDispatchToProps(dispatch) {
  return bindActionCreators({selectContact: selectContact}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(ContactList)

actions-4.js

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    myAction1: action1,
    myAction2: action2
  }, dispatch);
}

actions-5.js

import React, {Component} from 'react'
import {connect} from 'react-redux'
import selectContact from '../actions/action_select_contact'
import {bindActionCreators} from 'redux'
class ContactList extends Component {
  renderList() {
    return this.props.contacts.map((contact) => {
      return (
        <li
          key={contact.phone}
          onClick={() => this.props.selectContact(contact)}
          className='list-group-item'>{contact.name}</li>
      );
    });
  }
  render() { 
    return (
      <ul className = 'list-group col-sm-4'>
        {this.renderList()}
      </ul>
    );
  }
}
function mapStateToProps(state) {
  return {
    contacts: state.contacts
  };
}
function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    selectContact: selectContact
  }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(ContactList)

actions-6.js

//reducer_active_contact
export default function (state = null, action) {
  switch (action.type) {
    case 'CONTACT_SELECTED':
      return action.payload
  }
  return state;
 }

actions-7.js

// inside containers/contact-detail.js
import { connect } from 'react-redux'
// ... ContactDetail component here ...
function mapStateToProps(state) {
  return {
    contact: state.activeContact 
    //activeContact is defined in the rootReducer
  }
}
export default connect(.....)

actions-8.js

import { combineReducers } from 'redux';
import ContactsReducer from './reducer_contacts'
import ActiveContactReducer from './reducer_active_contact'
const rootReducer = combineReducers({
  contacts: ContactsReducer,
  activeConctact: ActiveContactReducer
});
export default rootReducer;

app.js

export default class App extends Component {
  render() {
    return (
      <div>
        <ContactList />
        <ContactDetail />
      </div>
    );
  }
}

containers-1.js

import React, {Component} from 'react'
import {connect} from 'react-redux'
import selectContact from '../actions/action_select_contact'
import {bindActionCreators} from 'redux'
class ContactList extends Component {
  renderList() {
    return this.props.contacts.map((contact) => {
      return (
        <li
          key={contact.phone}
          onClick={() => this.props.selectContact(contact)}
          className='list-group-item'>{contact.name}</li>
      );
    });
  }
  render() {
    return (
      <ul className = 'list-group col-sm-4'>
        {this.renderList()}
      </ul>
    );
  }
}
 
function mapStateToProps(state) {
  return {
    contacts: state.contacts
  };
}
export default connect(mapStateToProps[,...later...])(ContactList)

containers-2.js

function mapStateToProps(state) {
  return {
    amazingContacts: state.contacts 
  }
}

reducers-1.js

state = { 
    contacts: [{
        "name": "Miguel",
        "phone": "123456789",
    },{
        "name": "Peter",
        "phone": "883292300348",
    },{ 
        "name": "Jessica",
        "phone": "8743847638473", 
    },{ 
        "name": "Michael", 
        "phone": "0988765553",
   }], 
   activeContact: {
       "name": "Miguel",
       "phone": "123456789",
   }
}

reducers-2.js

export default function () {
  return [{
    "name": "Miguel",
    "phone": "123456789",
  },{
    "name": "Peter",
    "phone": "883292300348",
  },{
    "name": "Jessica",
    "phone": "8743847638473",
  },{
    "name": "Michael",
    "phone": "0988765553",
  }];
}

reducers-3.js

// reducers/index.js
import { combineReducers } from 'redux';
import ContactsReducer from './reducer_contacts'
import ActiveContactReducer from './reducer_active_contact'
const rootReducer = combineReducers({
  contacts: ContactsReducer,
  activeContact: ActiveContactReducer
});
export default rootReducer;

summary-1.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
class ContactDetail extends Component {
  render() {
    if (!this.props.contact) {
      return (
        <div>Select a contact from the list to see its details</div>
      );
    } 
    return (
      <div>
        <h3>Contact Details for: {this.props.contact.name}</h3>
        <div>Phone: {this.props.contact.phone}</div>
      </div>
    );
  }
}
function mapStateToProps(state) {
  return {
    contact: state.activeContact
  }
}
export default connect(mapStateToProps)(ContactDetail);

wiring-all-together-1.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import App from './components/app';
import reducers from './reducers'; // this exports rootReducer!!!
const createStoreWithMiddleware = applyMiddleware()(createStore);
ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
   <App />
  </Provider>
, document.querySelector('.container'));