actions.action_select_contact.js

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

contact-detail-full.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);

contact-list-full.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)

contact-list-state.js

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

contact-list-v1.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)

inside-containers.contact-detail.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(....

main.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'));

mapDispatchToProps-2.js

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

mapDispatchToProps.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)

mapStateToProps.js

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

reducer_active_contact-full.js

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

reducer_active_contact.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
}

reducers.index.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;

reducers_contacts.js

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

rootReducer.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;