Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save vedraiyani/77e8da004291edb6e11768a77cc45eba to your computer and use it in GitHub Desktop.
Save vedraiyani/77e8da004291edb6e11768a77cc45eba to your computer and use it in GitHub Desktop.
// actions/action_select_contact.js
function selectContact(contact) {
return {
type: 'CONTACT_SELECTED',
payload: contact
}
}
export default selectContact;
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);
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)
state = {
contacts: [{
"name": "Miguel",
"phone": "123456789",
},{
"name": "Peter",
"phone": "883292300348",
},{
"name": "Jessica",
"phone": "8743847638473",
},{
"name": "Michael",
"phone": "0988765553",
}],
activeContact: {
"name": "Miguel",
"phone": "123456789",
}
}
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
import { connect } from 'react-redux'
// ... ContactDetail component here ...
function mapStateToProps(state) {
return {
contact: state.activeContact //activeContact is defined in the rootReducer
}
}
export default connect(....
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'));
function mapDispatchToProps(dispatch) {
return bindActionCreators({
myAction1: action1,
myAction2: action2
}, dispatch);
}
// ... 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)
function mapStateToProps(state) {
return {
amazingContacts: state.contacts
}
}
//reducer_active_contact
export default function (state = null, action) {
switch (action.type) {
case 'CONTACT_SELECTED':
return action.payload
}
return state;
}
// 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
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;
export default function () {
return [{
"name": "Miguel",
"phone": "123456789",
},{
"name": "Peter",
"phone": "883292300348",
},{
"name": "Jessica",
"phone": "8743847638473",
},{
"name": "Michael",
"phone": "0988765553",
}];
}
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment