reactjs - TypeError: Cannot read property 'map' of undefined in Redux -
while learning react
redux
trying render user details.
getting typical error typeerror: cannot read property 'map'
. can understand state.users
in mapstatetoprops
method undefined
. tried using constructor
set initial state. no luck. missing trivial? error on return this.props.users.map((user) => { line in createlistitems() method.
containers\userlist.js
import react, {component} 'react'; import bindactioncreators 'redux'; import {connect} 'react-redux'; class userlist extends component{ createlistitems(){ return this.props.users.map((user) => { // here error return ( <li key={user.id}> {user.firstname} {user.lastname} </li> ); } ); } render(){ return( <ul> {this.createlistitems()} </ul> ); } } function mapstatetoprops(state) { return { users: state.users }; } export default connect(mapstatetoprops)(userlist);
reducers\userreducers.js
export default function () { return [ { id: 1, firstname: "sally", lastname: "brown", age: 12, location: "lund" }, { id: 2, firstname: "terance", lastname: "smith", age: 23, location: "london" }, { id: 3, firstname: "petter", lastname: "phantom", age: 34, location: "manchester" } ] }
reducers\index.js
import { combinereducers } 'redux'; import userreducers './userreducers'; const allreducers = combinereducers({ users: userreducers }); export default allreducers;
src\index.js
import react 'react'; import reactdom 'react-dom'; import './index.css'; import app './components/app'; import registerserviceworker './registerserviceworker'; import { createstore } 'redux'; import allreducers './reducers/userreducers'; import { provider } 'react-redux'; let store = createstore(allreducers); reactdom.render( <provider store={store}> <app /> </provider> , document.getelementbyid('root')); registerserviceworker();
the problem reducer
couldn't set state store
hence state.users
undefined
.
wrong import done variable allreducers in src\index.js file.
incorrect
src\index.js ... import allreducers './reducers/userreducers';
correct
src\index.js ... import allreducers './reducers/index';
Comments
Post a Comment