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

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -