为什么我的道具在使用 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;

当我尝试在 <Example /> 组件中记录 "this.props.eventPassed" 时，它给了我“未定义”。有什么东西不见了吗？这似乎是 redux 中 store 最简单的使用。

Answer 1

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

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

This is because you bound the action method to the value 'actions' in your mapDispatchToProps. This is turn provides gives access to the eventPassed action via 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. The result is that when you log for this property you receive "undefined"

其他必要的修改：

mapDispatchToProps 需要 return 一个值

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

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

你最初做的是 returning 一个状态，它不再是一个对象（或者在最初的情况下是一个对象数组），而只是 true[=28= 的值]

Answer 2

在你的 reducer 中，你用对象数组初始化你的状态 eventPassed 属性，同时你 return 只是布尔值，这是不正确的，因为它取代了初始状态，因此 initState 可能只是一个包含布尔值的对象，并且您必须 return 基于随动作发送的 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 时是“未定义的”？

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

javascript

reactjs

redux

react-redux

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

其他必要的修改：