Anzeige Axios-Antwort

Question

Ich möchte die Ergebnisse von Mai api-Anruf mit reagieren. Mein api gibt ein JSON-Objekt:

0:{produkt_id: 1, produktname: "Bauernbrot", preis: "4"} 
1:{produkt_id: 2, produktname: "Nussbrot", preis: "4.50"} 
2:{produkt_id: 3, produktname: "Dinkelbrot", preis: "4.20"} 

Es funktioniert, wenn meine reagieren Komponente so aussieht:

constructor() { 
    super(); 
    this.state = { 
     bread: ' ' 
    }; 
    } 

componentDidMount(){ 
    axios 
     .post('/api/produkte') 
     .then((res)=> { 
     console.log(res.data); 
     this.setState(
      { bread: res.data.produkte[0].produktname } 
     ); 
     }) 
     .catch((err)=> {}) 
    } 
render(){ 
    return (
     <div> 
     <h1>{this.state.bread}</h1> 
     </div> 
    ); 
} 

Wie ich Redux verwende, würde ich diesen Antrag mit einer redux-Aktion machen möchte. Diese Aktion sollte meinen "products" Status in meinem redux store aktualisieren, den ich in meiner react Komponente anzeigen werde. Leider kann ich das nicht schaffen.

Hier ist meine Aktion:

import axios from 'axios'; 
import { GET_PRODUCTS } from './types'; 

export function setProducts(products) { 
    return { 
    type: GET_PRODUCTS, 
    products 
    }; 
} 

export function updateProducts() { 
    return (dispatch) => { 
    return axios 
    .post('/api/produkte') 
    .then(res => { 
     console.log(res); 
     dispatch(setProducts(res.data.produkte[0].produktname)); 
    }) 
    .catch((err)=> {}) 
    } 
} 

Und mein Minderer (in Wurzelminderer importiert):

import {GET_PRODUCTS} from '../actions/types'; 

const initialState = { 
    products: {} 
}; 

export default (state=initialState,action = {}) => { 
    switch(action.type){ 
    case GET_PRODUCTS: 
     return { 
     products: action.products 
     } 
    default: return state; 
    } 
} 

Wenn ich meine Funktion "updateProducts()" Anruf in Constructor meiner reagieren Komponente, Ich kann nicht sehen, dass diese Aktion in meinem Redux Store ausgeführt wird. :(

Answer 1

import React from 'react'; 
import { connect } from 'react-redux'; 
import BestellForm from './BestellForm'; 
import { updateProducts } from '../../redux/actions/getProducts'; 

class BestellSeite extends React.Component { 
    render() { 
    return (
     <BestellForm updateProducts={updateProducts}/> 
    ); 
    } 
} 

export default connect (null, { updateProducts })(BestellSeite); 

Und:

import React, { Component } from 'react'; 
import './bestellSeite.css'; 
import moment from 'moment'; 
import axios from 'axios'; 

export default class BestellForm extends Component { 

    constructor() { 
    super(); 
    this.state = { 
     bread: ' ' 
    }; 
    } 
    componentWillMount() { 
    this.props.updateProducts(); 
    } 

} 

Answer 2

componentWillMount() { 
    this.props.dispatch(updateProducts()); 
    } 

hat den Trick