Axios-Responseを表示

Question

私はのapi-callの結果を表示したいと思います。私のAPIは、JSONオブジェクトを返します。

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

私は、コンポーネントがそのように見える反応する場合、それは動作します：

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

私はReduxのを使用していますように、私はReduxのアクションでその要求を作りたいと思います。このアクションは、私のreduxストア内の私の "製品"の状態を更新する必要があります。これは私の反応コンポーネントに表示されます。残念ながら私はそれを働かせることはできません。ここで

は私のアクションです：

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)=> {}) 
    } 
} 

と（ルート減速にインポート）私の減速：

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

私はコンポーネントを反応させ、私のコンストラクタで "updateProducts（）" 私の関数を呼び出す場合は、私はその行為が私のredux店で実行されているのを見ることができません。 :(

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

そして：

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

トリック