webentwicklung-frage-antwort-db.com.de

Warum sind meine Requisiten bei der Verwendung von redux und react.js "undefined"?

Ich habe versucht, meiner Anwendung einen Status hinzuzufügen, der gerade einen booleschen Wert gespeichert hat, wenn ein Ereignis vergangen ist. Ich kann nicht herausfinden, was ich hier falsch mache.

Reduzierer:  

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

Aktion:  

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

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

Behälter um die Komponente:  

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

Komponente:  

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;

Wenn ich versuche, "this.props.eventPassed" in der<Example />Komponente zu protokollieren, wird mir " undefined " angezeigt. Fehlt etwas? Dies scheint die einfachste Verwendung des Shops in redux zu sein. 

javascriptreactjsreduxreact-redux
6
Jim Peeters

Warum wird this.props.eventPassed als "undefined" protokolliert ?:

Die Aktionsfunktion (eventPassed), auf die Sie an dieser Stelle zugreifen möchten, existiert nicht unter this.props.actions.eventPassed. Es existiert eigentlich nur auf this.props.actions.

Dies liegt daran, dass Sie die Aktionsmethode an den Wert 'actions' .__ gebunden haben. in Ihren mapDispatchToProps. Dies ermöglicht wiederum den Zugriff auf die eventPassed Aktion über this.props.actions.

Da this.props.actions auf eventPassed verweist, versucht es auf .__ zuzugreifen. this.props.actions.eventPassed Sie versuchen, auf die Eigenschaft zuzugreifen von 'eventPassed' für die Aktion eventPassed. Das Ergebnis ist das, wenn Sie melden sich für diese Eigenschaft an, Sie erhalten "undefined"

Weitere notwendige Änderungen:

mapDispatchToProps muss einen Wert zurückgeben

Eine Pfeil-Funktion mit einem Blocktext gibt keinen Wert automatisch zurück und muss daher definiert werden. Ihre Funktion muss also so aussehen:

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

Ausgangszustand ist ein Array, das ein Objekt enthält:

const initialState = [{
  eventPassed: false
}];

Da Sie später versuchen, es als object { eventPassed: true} und nicht als Array von Objekten [ { eventPassed: true } ] zu referenzieren, sollte es Folgendes sein:

const initialState = {
  eventPassed: false
};

Der Reducer muss den korrekten aktualisierten (aber nicht mutierten) Status zurückgeben: 

export default function eventPassed(state = initialState, action) {
  switch (action.type) {
    case actionTypes.EVENT_PASSED:
      return {
        ...state,
        eventPassed: action.payload
      };
    default:
      return state;
  }
}

Sie haben anfangs einen Zustand zurückgegeben, der kein Objekt mehr ist (oder im ursprünglichen Fall ein Array von Objekten), sondern nur den Wert von true.

9
Pineda

In Ihrer Variablen reducer initialisieren Sie Ihren Status mit dem Array von object mit der Eigenschaft eventPassed. In der Zwischenzeit geben Sie nur den Boolean-Wert zurück basierend auf der payload, die mit der folgenden Aktion verschickt wurde:

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

In Ihrer component müssen Sie möglicherweise Folgendes ändern:

this.props.eventPassed bis this.props.actions.eventPassed

1
Basim Hennawi