Redux не получает данные из запроса API - PullRequest
Новая
       1

Redux не получает данные из запроса API

0 голосов
/ 20 июня 2019

Я новичок в React / Redux.Я делаю приложение с использованием API, но код не работает.Когда я запускаю код, он говорит: «this.props.recipes.map не является функцией» и ничего не отображает.

Если я изменю полезную нагрузку на: «payload: response.data.recipes», тогдаошибка изменяется на «Данное действие« FETCH_RECIPE », редуктор« recipes »возвратил неопределенным.»но нет ошибок на экране (только в консоли).Я думал, что написание "(state = [], action)" решит проблему, но, похоже, нет.В чем проблема и как я могу исправить эту ошибку? 

Action Creator

import recipe from '../apis/recipe';

export const fetchRecipe = () => async dispatch => {
    const response = await recipe.get('');

    dispatch({ type: 'FETCH_RECIPE', payload: response.data })
};

Reducer

import { combineReducers } from 'redux';

const recipeReducer = (state = [], action) => {
    switch(action.type) {
        case 'FETCH_RECIPE':
            return action.payload;
        default:
            return state;
    }
};

export default combineReducers({
    recipes: recipeReducer
});

import React from 'react';
import { connect } from 'react-redux';
import { fetchRecipe } from '../actions';

class Recipe extends React.Component {
    componentDidMount() {
        this.props.fetchRecipe();
        console.log("This doesn't work", this.props.recipes)
    }

    renderList() {
        return this.props.recipes.map(recipe => {
            return (
                <div>
                    <p>{recipe.publisher}</p>
                </div>
            )
        })
    }

    render() {
        console.log("First loaded: empty, second time: data fetched", this.props.recipes)
        return (
            <div>
                {this.renderList()}
            </div>
        );
    }
}

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

export default connect(mapStateToProps,{
    fetchRecipe
})(Recipe);

API Request

import axios from 'axios';
import { key } from './config';

export default axios.create({
    baseURL: `https://cors-anywhere.herokuapp.com/https://www.food2fork.com/api/search?key=${key}&q=pizza`
});
...