为什么我的道具在使用redux和react.js时没有定义？

Question

我试图向我的应用程序添加一个状态，当某个事件传递时，它只保存了一个布尔值。我不知道我在这里做错了什么。

减速器：

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

行动：

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

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

组件周围的容器：

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

组件：

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;

当我尝试在"this.props.eventPassed"组件中记录<Example />时，它会给出"undefined".有什么东西不见了吗？这似乎是redux中商店最简单的用法。

Answer 1

为什么this.props.eventPassed被记录为“未定义”？： 此时您试图访问的操作函数( this.props.actions.eventPassed. )在this.props.actions.eventPassed.中不存在。它实际上只存在于this.props.actions.上。 这是因为您将操作方法绑定到您的操作值。这是通过eventPassed提供对this.props.actions操作的访问。 由于this.props.actions指向eventPassed，通过尝试访问this.props.actions.eventPassed，您将尝试访问动作eventPassed上的'eventPassed‘属性。结果是，当您登录此属性时，您将收到“未定义的”。

其他必要的修正：

mapDispatchToProps 需要返回一个值

具有块体箭头函数的不会自动返回值，因此必须定义一个值。所以您的函数需要如下所示：

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

初始状态是一个数组，包含一个对象：

const initialState = [{
  eventPassed: false
}];

由于您以后试图将其引用为object { eventPassed: true}，而不是对象的数组( [ { eventPassed: true } ] )，所以应该是：

const initialState = {
  eventPassed: false
};

减速器需要返回正确的更新(但是unmutated)状态：)

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