javascript - 为什么在使用redux和react.js时我的道具为undefined？(Why are my props `undefined` when using redux and react.js?)

Question

I tried to add a state to my application that just saved a boolean when some event has passed.

(我试图向我的应用程序添加一个状态，该状态仅在某些事件经过后才保存一个布尔值。)

I can't figure out what I'm doing wrong here.

(我无法弄清楚我在做什么错。)

Reducer:

(减速器：)

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;
  }
}

Action:

(行动：)

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 log "this.props.eventPassed" in the <Example /> component it gives me " undefined ".

(当我尝试在<Example />组件中记录“ this.props.eventPassed”时 ，它给了我“ undefined ”。)

Is there something missing?

(缺少什么吗？)

This seems to be the most simple use of the store in redux.

(这似乎是redux中存储最简单的用法。)

  ask by Jim Peeters translate from so

Answer 1

Why is this.props.eventPassed logged as "undefined"?:(为什么this.props.eventPassed被记录为“未定义”？：)

The action function ( eventPassed ) you are trying to access at this point does not exist at this.props.actions.eventPassed .

(此时您要访问的动作函数（ eventPassed ）在this.props.actions.eventPassed中不存在。)

It actually exists solely on this.props.actions .

(它实际上仅存在于this.props.actions 。)

This is because you bound the action method to the value ' actions ' in your mapDispatchToProps.

(这是因为您将action方法绑定到mapDispatchToProps中的值“ actions ”。)

This is turn provides gives access to the eventPassed action via this.props.actions .

(依次提供通过this.props.actions提供对eventPassed动作的this.props.actions 。)

Since this.props.actions points to eventPassed , by trying to access this.props.actions.eventPassed you are trying to access the property of 'eventPassed' on the action eventPassed .

(由于this.props.actions点eventPassed ，试图通过访问this.props.actions.eventPassed您试图访问对行动“eventPassed”的财产eventPassed 。)

The result is that when you log for this property you receive " undefined "

(结果是，当您登录此属性时，您会收到“ undefined ”)

---

Other necessary amendments:(其他必要的修正：)

mapDispatchToProps needs to return a value

(mapDispatchToProps需要返回一个值)

An arrow function with a block body does not automatically return a value and therefore one must be defined.

(具有块体的箭头功能 不会自动返回值 ，因此必须定义一个值 。)

So your function needs to look like:

(因此，您的函数需要如下所示：)

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

---

Initial state is an array containing an object:

(初始状态是一个包含对象的数组：)

const initialState = [{
  eventPassed: false
}];

Since you're trying to reference it later as an object { eventPassed: true} and not an array of objects [ { eventPassed: true } ] it should be:

(由于您稍后尝试将其引用为object { eventPassed: true}而不是对象数组[ { eventPassed: true } ]因此应为：)

const initialState = {
  eventPassed: false
};

---

The reducer needs to pass back the correct updated (but unmutated ) state:

(减速器需要传递正确的更新（但未突变 ）状态：)

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

What you were initially doing was returning a state that was no longer an object (or in the original case an array of object) but just the value of true

(您最初要做的是返回一个不再是对象（或在原始情况下为对象数组）的状态，而只是true)