Display Axios-Response [duplicate] - api

Question

This question already has answers here:
How does connect work without mapDispatchToProps
(2 answers)
Closed 5 years ago.
I want to display the results of may api-call with react. My api returns a JSON Object:
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"}
It works if my react component looks like that:
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>
);
}
As I am using Redux, i would like to make that request with a redux-action. This action should update my "products" state in my redux store, that i will display in my react component. Unfortunately I can't get that working.
Here is my action:
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)=> {})
}
}
And my reducer (imported in root reducer):
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;
}
}
If i call my function "updateProducts()" in Constructor of my react component, I can't see that action being executed in my redux store. :(

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);
And:
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());
}
did the trick