为什么在使用 redux 和 react.js 时我的 props `undefined`？

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;

当我尝试在 <Example /> 组件中记录 “this.props.eventPassed” 时，它给了我“undefined”。有什么遗漏吗？这似乎是 redux 中最简单的 store 使用方法。

Answer 1

为什么 this.props.eventPassed 记录为“未定义”？：

您此时尝试访问的操作函数 (eventPassed) 在 this.props.actions.eventPassed 中不存在。它 实际上只存在于 this.props.actions。

这是因为您将操作方法​​绑定到值“actions” 在你的 mapDispatchToProps 中。这又提供了访问 eventPassed 通过this.props.actions 操作。

由于 this.props.actions 指向eventPassed，通过尝试访问 this.props.actions.eventPassed您正在尝试访问该属性 'eventPassed' 在动作eventPassed 上。结果是，当 你为这个属性登录你收到“undefined”

---

其他必要的修改：

mapDispatchToProps需要返回一个值

带有块体的arrow function不会自动返回值，因此必须定义一个值。所以你的函数需要看起来像：

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

---

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

const initialState = [{
  eventPassed: false
}];

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

const initialState = {
  eventPassed: false
};

---

reducer 需要传回正确的更新（但未变异）状态：

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