Попытка использовать Axios с редуктором Redux ... состояние возврата не определено - PullRequest
Новая
       5

Попытка использовать Axios с редуктором Redux ... состояние возврата не определено

0 голосов
/ 06 декабря 2018

Я пытаюсь использовать Axios с редуктором Redux и пытаюсь сохранить ответ в состояние, чтобы я мог распечатать его, но когда я пытаюсь распечатать изображение на странице, он возвращает typeError: состояние не определено.Я могу console.log получить ответ, но не могу понять, как его сохранить или заставить его работать правильно. Просмотр изображения 

import Axios from 'axios';
const initState = {
    some: '',
    cat: '',
}
const reducer = (state = initState, action) => {
    switch (action.type) {
        case 'GET_NEW_CAT':
        Axios.get('http://aws.random.cat/meow')
        .then((response) => {
            console.log(response.data.file)
           return state.cat = response.data.file
        }) 
        .catch((err) => console.log(err));
        break;
        default:
            return state;
    }
}
export default reducer;

Редактировать: Здесь находится состояние диспетчеризации и отображения: 

import React from 'react';
import { connect } from 'react-redux';

const CatsPage = (props) => {
    return (
        <div>
            <button onClick={props.getNewCatImage}>Get new cat image</button>
            <img src={props.cats} alt='Cat'/>
        </div>
    )
}

const mapStateToProps = state => {
    return {
        cats: state.cat
    };
};

const mapDispatchToProps = dispatch => {
    return {
        getNewCatImage: () => dispatch({type: 'GET_NEW_CAT'}),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(CatsPage);

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

Вы изменяете состояние с помощью этой строки: 

return state.cat = response.data.file

При работе с избыточностью состояние неизменно , и, таким образом, вы обновляете состояние с помощью копий.Поэтому вы можете использовать Object.assign, как показано ниже: 

return Object.assign({}, state, { cat: response.data.file })

Или, что более элегантно, оператор распространения: 

return { ...state, cat: response.data.file }

В качестве дополнительной документации Redux содержитнекоторые рецепты, описывающие, как работать с неизменяемым состоянием для различных сценариев.

0 голосов
/ 06 декабря 2018

Что говорит ошибка, так это то, что состояние не определено.Это означает, что ваш компонент явно не связан с состоянием.

Итак, вам не хватает нескольких шагов здесь.

  • Создание глобального редуктора.Установите флажок ОбъединитьReducers
  • Используйте провайдера из Reaction-redux для передачи состояния в вашем приложении.
...