javascript - 为什么在使用 redux 和 react.js 时我的 Prop 是 `undefined`？

Question

我试图向我的应用程序添加一个状态，该状态仅在某些事件过去时保存了一个 bool 值。我不知道我在这里做错了什么。

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

围绕组件的容器:

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 需要返回一个值

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

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

的值