Created
March 25, 2017 06:50
-
-
Save ericchen0121/6bc0654563fa71ab04dd69e0bfeb6668 to your computer and use it in GitHub Desktop.
connect() function not picking up Redux state (returning undefined) // in the gist file names, i used "__" in place of "/" in my folder structure
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import './App.css'; | |
import { Items } from '../containers/Items' | |
export default class App extends Component { | |
render() { | |
return ( | |
<div> | |
<Items /> | |
</div> | |
) | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Uncaught TypeError: Cannot read property 'map' of undefined | |
at Items._this.renderList (index.js:11) | |
at Items.render (index.js:24) | |
at ReactCompositeComponent.js:796 | |
at measureLifeCyclePerf (ReactCompositeComponent.js:75) | |
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795) | |
at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822) | |
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362) | |
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) | |
at Object.mountComponent (ReactReconciler.js:46) | |
at ReactDOMComponent.mountChildren (ReactMultiChild.js:238) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import { connect } from 'react-redux'; | |
import './items.css'; | |
export class Items extends Component { | |
renderList = () => { | |
console.log("WHAT", this) | |
const { items } = this.props; | |
return items.map((item) => ( | |
<li key={item.id} | |
className={'item-list-item'} | |
onClick={() => console.log('added to store')}> | |
<span>{item.title}</span> | |
<img alt='' src={item.link} /> | |
</li> | |
)) | |
} | |
render() { | |
return ( | |
<ul className='item-list'> | |
{this.renderList()} | |
</ul> | |
) | |
} | |
} | |
// items is a key that is sent as props to Items | |
const mapStateToProps = (reduxState) => { | |
return { | |
items: reduxState.items | |
} | |
} | |
const connectedItems = connect(mapStateToProps)(Items) | |
export default connectedItems |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import { Provider } from 'react-redux'; | |
import { createStore } from 'redux'; | |
import reducers from './reducers'; | |
import App from './components/App'; | |
import './index.css'; | |
// we pass the reducer to the store when we create it | |
// we also give access to the Redux Devtool (installed in Chrome as a browser extension) | |
const store = createStore(reducers, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); | |
ReactDOM.render( | |
<Provider store={store}> | |
<App /> | |
</Provider>, | |
document.getElementById('root') | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { combineReducers } from 'redux'; | |
import itemReducer from './items'; | |
import shoppingCartReducer from './shoppingCart' | |
const combinedReducer = combineReducers({ | |
items: itemReducer, | |
shoppingCart: shoppingCartReducer | |
}) | |
export default combinedReducer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const INIT_STATE = [ | |
{ id: 1, title: 'Philz Coffee', link: 'http://www.philzcoffee.com/images/items/coffee-lighter-blends-ethiopian-single.01.png?resizeid=2&resizeh=250&resizew=250'}, | |
{ id: 2, title: 'Philz Coffee', link: 'http://www.philzcoffee.com/images/items/coffee-lighter-blends-ethiopian-single.01.png?resizeid=2&resizeh=250&resizew=250'} | |
]; | |
export default (state = INIT_STATE, action) => { | |
switch (action.type) { | |
default: | |
return state; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment