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 /> 组件中记录＆＃34; this.props.eventPassed＆＃34; 时，它会给我＆＃34; 未定义＆＃34 ;.有什么遗失的吗？这似乎是redux中最简单的商店用途。

Answer 1

为什么this.props.eventPassed记录为“undefined”？：

此时您尝试访问的操作功能（eventPassed）在 this.props.actions.eventPassed 中不存在。它   实际上只存在于 this.props.actions 。

这是因为您将操作方法绑定到值“操作”   在mapDispatchToProps中。这是转向提供给予访问权限   通过eventPassed进行this.props.actions行动。

由于this.props.actions指向eventPassed，因此尝试访问   this.props.actions.eventPassed您正在尝试访问该媒体资源   动作eventPassed上的'eventPassed'。结果就是当   您登录此属性时会收到“未定义”

其他必要的修正：

mapDispatchToProps需要返回值

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

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

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

const initialState = [{
  eventPassed: false
}];

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

const initialState = {
  eventPassed: false
};

reducer需要传回正确的更新（但 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

使用redux和react.js时，为什么我的道具“未定义”？

2 个答案:

为什么this.props.eventPassed记录为“undefined”？：

其他必要的修正：