Why are my `undefined` details when using redux and react.js?

Question

I tried to add state to my application that just kept a boolean when an event passed. I can’t understand what I am doing wrong here.

Gearbox:

import * as actionTypes from '../constants/action-types.js';

const initialState = [{
  eventPassed: false
}];

export default function eventPassed(state = initialState, action) {
  switch (action.type) {
    case actionTypes.EVENT_PASSED:
      return true;
    default:
      return state;
  }
}

Act:

import * as actionTypes from '../constants/action-types';

export function eventPassed(eventPassed) {
  return {
    type: actionTypes.EVENT_PASSED,
    payload: { eventPassed: eventPassed }
  };
}

Container around component:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Example from '../components/example.jsx';
import { eventPassed } from '../actions/app-actions';

class ExampleContainer extends Component {
  render() {
    return (
      <Example {...this.props} />
    );
  }
}

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators({
    eventPassed
  }, dispatch)
});

const mapStateToProps = (state) => ({
  eventPassed: state.eventPassed
});

export default connect(mapStateToProps, mapDispatchToProps)(ExampleContainer);

Component:

import React, { Component, PropTypes } from 'react';

class Example extends Component {

  constructor() {
    super();
    this.action = this.action.bind(this);
  }

  componentDidMount() {
    this.props.actions.eventPassed(true);
  }

  action() {
    console.log(this.props.eventPassed);
  }

  render() {
    return (
      <div>
        <button onClick={this.action}>Action</button>
      </div>
    );
  }
}

export default Example;

When I try to write "this.props.eventPassed" to a component , it gives me undefined , is there something missing? This is apparently the easiest store use in redux. <Example />

Answer 1

Why is this.props.eventPassed written as "undefined" ?:

(eventPassed), , this.props.actions.eventPassed. this.props.actions.

, mapDispatchToProps. eventPassed this.props.actions.

this.props.actions eventPassed, this.props.actions.eventPassed "eventPassed" eventPassed. , , " undefined"

---

:

mapDispatchToProps

arrow , . :

mapDispatchToProps = (dispatch) => {
  return { actions: bindActionCreators(eventPassed, dispatch) }
} 

---

- , :

const initialState = [{
  eventPassed: false
}];

object { eventPassed: true}, [ { eventPassed: true } ], :

const initialState = {
  eventPassed: false
};

---

( ) :

export default function eventPassed(state = initialState, action) {
  switch (action.type) {
    case actionTypes.EVENT_PASSED:
      return {
        ...state,
        eventPassed: action.payload
      };
    default:
      return state;
  }
}

, , , ( ), true

Answer 2

reducer eventPassed, , , initState , , payload, , :

import * as actionTypes from '../constants/action-types.js';

const initialState = {
  eventPassed: false
};

export default function eventPassed(state = initialState, action) {
  switch (action.type) {
    case actionTypes.EVENT_PASSED:
      return {
        ...state,
        eventPassed: action.payload
      };
    default:
      return state;
  }
}

, component :

this.props.eventPassed this.props.actions.eventPassed