Reagieren Redux : Action Schöpfer nicht aufrufen reducer

Meine Aktion creator nicht anrufen, mein Druckminderer. Jede Hilfe wird sehr geschätzt.

types.js

export const SELECTED_FOOD = 'selected_food';

index.js (Aktion Ersteller /Aktion)

import {
  SELECTED_FOOD
} from './types';

export function selectedFood({data}) {
console.log('SELECTED_FOOD **********************',data);
  return({
    type: SELECTED_FOOD,
    payload: data
  });
}

Ausgabe in der Konsole.log-in Aktion creator

Object {_id: "18240", description: "Croissants, apple", score: 0.75, fields: Object}

selected_food_reducer.js

import {
SELECTED_FOOD

} from '../actions/types';

export default function(state = [], action) {
 switch(action.type) {
  case SELECTED_FOOD:
    console.log('Selected Food Reducer *************', state);
    return  action.payload ;
}

return state;
}

Komponente BEARBEITEN andernfalls rufen Sie Versand.

Sollte ich habe dieses auf meinem ersten post, es scheint, es ist etwas falsch, wie der Versand heißt. ESLint nachlässt Versand in Zeile 3 definiert, aber nie benutzt.

import React from 'react';
import { connect } from 'react-redux';
import { dispatch } from 'react-redux';
import { selectedFood } from '../actions/index';

class TableRow extends React.Component {
  render() {
    const {
      data
    } = this.props;


    console.log('PROPS TableRow', this.props);

    const row = data.map((data) =>
    <tr onClick={() => selectedFood({data})}>
      <td key={data.description}>{data.description}</td>
      <td key={data.id}>{data.fields.nutrients[0].amountPer100G}</td>
      <td key={data.id}>{data.fields.nutrients[1].amountPer100G}</td>
      <td key={data.id}>{data.fields.nutrients[4].amountPer100G}</td>
    </tr>
    );
    return (
      <tbody>{row}</tbody>
    );
  }
}

const  mapStateToProps = (state) => {
  return {
    selectedFood: state.selectedFood
  }
}


const mapDispatchToProps = (dispatch) => {
  console.log('IN mapDispatchToProps')
  return {
    onClick: ({data}) => {
      dispatch(selectedFood({data}))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProp)(TableRow);

Sie müssen Versand anstatt es einfach so nennen

InformationsquelleAutor kennedy | 2017-03-12

12

Dem action creator nicht rufen Sie die reducer. Es ist, was es ist, nichts mehr, schafft es eine Aktion - ein Objekt mit einer der action-Typ und die Nutzlast für diese Aktion.

Müssen Sie Versand einer Aktion zu zwingen redux zu nennen, der Druckminderer und das ist der Ort, wo Sie mit Ihrer Aktion Schöpfer, das ist:
```
import { Dispatch } from "redux";
import { selectedFood } from "./actions";
Dispatch(selectedFood({type:"hamburger"}));
```
sollte rufen Sie den Abschwächer, meist jedoch werden Sie nicht rufen Sie die Dispatch direkt, sondern in Ihrem mapDispatchToProps Methode verwendet, um verbinden Sie Ihr reagieren Komponente auf die redux-Shop.

Es gibt viele Beispiel wie react-redux zu verwenden, über map-Funktionalität, also ich würde vorschlagen, um in Sie zu Lesen, und zu Lesen, wie redux funktioniert.

====== EDIT nach Frage aktualisiert =========

Also Erstens Abfertigung von import nicht verwendet und ESLint ist Recht sagen, Sie brauchen das nicht importieren da:
```
const mapDispatchToProps = (dispatch) => {
  console.log('IN mapDispatchToProps')
  return {
    onClick: ({data}) => {
      dispatch(selectedFood({data}))
    }
  }
}
```
hast du nicht angerufen dispatch von Ihrem import nur aus dem argument, es übergeben wird, um Ihre mapDispatchToProps durch die connect Funktion.

Dann ist dies schlichtweg falsch:
```
<tr onClick={() => selectedFood({data})}>
```
importiert eine Aktion Schöpfer, die aufgerufen wird, klicken Sie auf der Zeile der Tabelle, das ist ein Aktion definition wird erstellt, indem die action-Schöpfer, und das ist es. Dein code macht genau das, was du geschrieben hast.

Den mapDispatchToProps - Funktion tut, was der name schon sagt - es-Karten-Versand-Funktionen zu Requisiten der Komponente.

So sollte es sein:
```
<tr onClick={() => this.props.onClick({data})}>
```
und dass sollte der Versand der Aktion und Arbeit.

Jedoch ich würde empfehlen, nehmen einige Kurse, oder Lesen Sie mehr über react, redux und react-redux, denn deine code-Beispiele und die Frage selbst suggerieren, dass Sie nur versuchen, etwas zu arbeiten, ohne das grundlegende Verständnis, wie es funktioniert, und sogar, wie javascript funktioniert. Sorry für das Kommentar, aber das ist, wie es aussieht.
- Danke Alek, ich war nicht importieren Versand ursprünglich, aber nach dem tun so, es ist immer noch Arbeit und ESLint ist, Kennzeichnen Sie als deklariert, aber nie verwendet. Ich glaube, es ist etwas falsch in mapDispatchToProps, aber ich bin andernfalls zu sehen.
- Bearbeitet meine Antwort.
- Danke Alek, das ist gute Ratschläge. Ich ging durch und Lesen Sie die redux-Dokumentation der letzten Nacht wieder und das Problem entdeckt. Es half Ihnen klar, bis viel. Ich werde zu aktualisieren meinem Beitrag. Danke nochmal für Eure Hilfe =)
- Wenn dir mein Beitrag geholfen hat, fühlen Sie sich frei, um Sie zu markieren, wie eine Antwort 🙂
- Schöne Erklärung von @alekkowalczyk
- Genau das war es für mich. Ich war dem Aufruf der Aktion, die irgendwo außerhalb des React-Komponente, so dass ich anrufen musste-Versand direkt auf die Aktion nennen und dann hat es geklappt: ReduxStore.dispatch(myaction());
InformationsquelleAutor alek kowalczyk
0

Ich denke, dass Sie vielleicht brauchen, um zu zeigen, wie Sie sind, importieren Sie andere Dateien. Meine Beobachtungen von dem, was Sie gemeinsam:

1) Sie brauchen, um zu importieren SELECTED_FOOD von Arten.

2) Ihre return state sollte im Zusammenhang mit der switch-Anweisung.

InformationsquelleAutor Rowland

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.