Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
//src/routes/index.js
import CoreLayout from '../layouts/CoreLayout/CoreLayout'
import Dashboard from './Dashboard'
export const createRoutes = (store) => ({
path : '/',
component : CoreLayout,
indexRoute : Dashboard,
getChildRoutes (location, cb) {
require.ensure([], (require) => {
cb(null, [
require('./Transactions').default(store)
])
})
}
})
export default createRoutes
// src/routes/Transactions/components/Transactions.js
import React, { Component } from 'react'
import { LinkContainer } from 'react-router-bootstrap'
import {
... // Removed to save space
} from 'react-bootstrap';
import Receipts from '../routes/Transactions/components/Receipts'
import Charges from '../routes/Transactions/components/Charges'
class Transactions extends Component {
constructor(props) {
super(props)
this.props.fetchTransactions(42); // test value
console.log(this);
console.log(this.props);
}
render() {
return (
<Tab.Container id="left-tabs-example" defaultActiveKey="second">
<Row className="clearfix">
<Col sm={4}>
<Nav bsStyle="pills" stacked>
<LinkContainer to="/transactions/charges">
<NavItem eventKey="first">
Charges
</NavItem>
</LinkContainer>
<LinkContainer to="/transactions/receipts">
<NavItem eventKey="second">
Receipts
</NavItem>
</LinkContainer>
</Nav>
</Col>
<Col sm={8}>
<Tab.Content animation>
<Tab.Pane eventKey="first">
<Receipts /> // Want content from Receipts component along with it's props & state from connect() in `src/routes/Transactions/routes/Receipts/containers/Receipts.js`
</Tab.Pane>
<Tab.Pane eventKey="second">
<Charges /> // Same as receipts
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
)
}
}
export default Transactions
// src/routes/Transactions/containers/TransactionContainer.js
import { connect } from 'react-redux'
import { fetchTransactions } from '../modules/transactions'
import Transactions from '../components/Transactions'
const mapDispatchToProps = {
fetchTransactions: (userid) => fetchTransactions(userid)
}
const mapStateToProps = (state) => ({
transactions: state.transactions
})
export default connect(mapStateToProps, mapDispatchToProps)(Transactions)
// src/routes/Transactions/index.js
import { injectReducer } from '../../store/reducers'
export default (store) => ({
path : 'transactions',
getChildRoutes (location, cb) {
require.ensure([], (require) => {
cb(null, [
require('./routes/Charges').default(store),
require('./routes/Receipts').default(store)
])
})
},
getComponent (nextState, cb) {
require.ensure([], (require) => {
const Transactions = require('./containers/TransactionsContainer').default
const reducer = require('./modules/transactions').default
injectReducer(store, { key: 'transactions', reducer })
cb(null, Transactions)
}, 'transactions')
}
})
// src/routes/Transactions/routes/Receipts/components/Receipts.js
import React, { Component } from 'react'
import {
} from 'react-bootstrap';
class Receipts extends Component {
constructor(props) {
super(props)
console.log(this); // no props (even those injected from connect())
}
render() {
return (<div>RECEIPTS!</div>)
}
}
export default Receipts
// src/routes/Transactions/routes/Receipts/containers/Receipts.js
import { connect } from 'react-redux'
import { fetchReceipts } from '../modules/receipts'
import Receipts from '../components/Receipts'
const mapDispatchToProps = {
fetchReceipts: (userid) => fetchReceipts(userid)
}
const mapStateToProps = (state) => ({
receipts: state.receipts
})
export default connect(mapStateToProps, mapDispatchToProps)(Receipts)
// src/routes/Transactions/routes/Receipts/index.js
import { injectReducer } from '../../../../store/reducers'
export default (store) => ({
path : 'receipts',
getComponent (nextState, cb) {
require.ensure([], (require) => {
const Receipts = require('./containers/ReceiptsContainer').default
const reducer = require('./modules/receipts').default
injectReducer(store, { key: 'receipts', reducer })
cb(null, Receipts )
}, 'receipts')
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment