State not defined (reactJS)

Question

I'm bulding App with React Redux.

This is my reducer:

import { INCOME_LIST } from '../actionTypes'

import Immutable from 'immutable'

const initialUserState = {
  list: [{
                    id: 1,
                    label: 'List item 1'
                },
                {
                    id: 2,
                    label: 'List item 2'
                }]
}

const listReducer = function(state = [initialUserState], action) {
  switch(action.type) {
  case 'INCOME_LIST': 
         return Object.assign({}, state, { list: action.data });

  default: return state;
  }

}

export default listReducer

This is my Component:

import React, { Component, PropTypes } from 'react'
import { Link, browserHistory } from 'react-router'
import { connect } from 'react-redux'
import axios from 'axios'

class Income extends Component {
  constructor(props) {
    super(props)
  }
    }

render() {
 console.log(this.props.items)
        return (
            <div>
                test
            </div>
        )
    }

}

const mapStateToProps = function(store) {
  return {
   items: state.list
  };
}

export default connect(mapStateToProps)(Income);

Console says that: 'undefined' Why console.log(this.props.items) get undifined? How to right way to get a state from reducer? May be mistake there?

Shubham Khatri · Accepted Answer · 2017-01-22 17:03:31Z

1

Three things I can see,

Firstly in mapStateToProps function you are defining the variable as store and using it as state. Change it to this

const mapStateToProps = function(state) {
  return {
   items: state.list
  };
}

Also after the constructor you have an extra } thats the reason you get an error when you place you console.log() in the render() function.

Also in your reducer you the way your are defining the initial state makes it an array. You should correct that like state='initialUserState

Complete code

Reducer

import { INCOME_LIST } from '../actionTypes'

import Immutable from 'immutable'

const initialUserState = {
  list: [{
                    id: 1,
                    label: 'List item 1'
                },
                {
                    id: 2,
                    label: 'List item 2'
                }]
}

const listReducer = function(state = initialUserState, action) {
  switch(action.type) {
  case 'INCOME_LIST': 
         return Object.assign({}, state, { list: action.data });

  default: return state;
  }

}

export default listReducer;

Component

class Income extends Component {
  constructor(props) {
    super(props)
  }


render() {
 console.log(this.props.items)
        return (
            <div>
                test
            </div>
        )
    }

}

const mapStateToProps = function(state) {
  return {
   items: state.list
  };
}

export default connect(mapStateToProps)(Income);

edited Jan 22, 2017 at 17:03

answered Jan 22, 2017 at 16:49

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Егор Кротенко Over a year ago

do this but in console I get Undefined..... Why I can't get state form my reducer?

Shubham Khatri Over a year ago

Try and console.log(state.list) inside the mapStateToProps function and see if it logs anything

Егор Кротенко Over a year ago

Do that const mapStateToProps = function(state) { return { items: state.list }; console.log(state.list) } nothing happens

Shubham Khatri Over a year ago

You have to log before the return statement

Shubham Khatri Over a year ago

In you reducer you should assign initialstate like state=initialUserState change that and it should work

|

Oro · Accepted Answer · 2017-01-22 15:57:22Z

1

Your argument is named store, but you refer to it as state. Try:

const mapStateToProps = function(state) {
  return {
   items: state.list
  };
}

answered Jan 22, 2017 at 15:57

Oro

1,86716 silver badges22 bronze badges

4 Comments

Егор Кротенко Over a year ago

yes, you a right. Where I can make сonsole.log(items); for examle. In wich part code? because I try do it in render function and getting error. Sorry I'm new in react

Oro Over a year ago

Whatever returns from mapStateToProps is mapped to the component's props. Try console.log(this.props.items).

Егор Кротенко Over a year ago

In wich part of code I can Paste it? because if I paste in render. I get error

Егор Кротенко Over a year ago

ge undefined if, paste in render ((

Collectives™ on Stack Overflow

State not defined (reactJS)

2 Answers 2

7 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related