尝试将 Axios 与 Redux reducer 一起使用...返回状态未定义答案

【问题标题】：Trying to use Axios with Redux reducer... returns state is undefined尝试将 Axios 与 Redux reducer 一起使用...返回状态未定义
【发布时间】：2018-12-06 14:57:23
【问题描述】：

我正在尝试将 Axios 与 Redux reducer 一起使用并尝试将响应保存到状态中以便我可以将其打印出来，但是当我尝试将图像打印到页面时它返回 typeError: state is undefined。我可以 console.log 响应，但不知道如何保存它或让它正常工作。 View picture

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

【问题讨论】：

鉴于该错误消息，您能否添加组件如何连接到状态的代码？一般来说，代码（甚至错误）的图片没有帮助。代码和错误消息都可以直接格式化成问题。
您没有退回任何东西。在 reducer 中，您应该在每次更新状态时返回。此外，如果您在其他地方拨打电话会更好。一个传奇，让 reducer 只处理状态的变化。
正如@AlexG 指出的那样，并再次检查您的错误跟踪 - 请注意 GET 请求的日志发生在错误之后，这意味着您的减速器在接收异步调用之前返回未定义。通常，这样的调用是在组件安装时或基于按钮单击时进行的。如果你得到一个有效的响应，那么你将发送 GET_NEW_CAT。

标签： javascript reactjs react-redux axios

【解决方案1】：

错误是状态未定义。这意味着您的组件显然没有连接到状态。

您在这里缺少几个步骤。

创建一个全局减速器。检查combineReducers
使用来自react-redux 的Provider 在您的应用程序中传递状态。

【讨论】：

嘿，感谢您的回答，我的项目中确实有 Provider，并且我正在使用连接到 mapStateToProps，我相信此时我不需要 combineReducers，因为我只使用了一个 reducer.. .而且我确实相信问题出在 Axios.get 中，当我尝试为“猫”设置新值时，但我不知道问题是什么......

【解决方案2】：

你正在用这一行改变状态：

return state.cat = response.data.file

When working with redux, state is immutable，因此您可以使用副本更新状态。因此您可以使用Object.assign，如下所示：

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

或者更优雅的是展开运算符：

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

另外，Redux documentation 包含一些说明如何在各种场景中使用不可变状态的方法。

【讨论】：

嘿，我知道那个扩展运算符并将我的代码改回它，甚至尝试使用 object.assign，但错误并没有消失。我刚刚编辑了 origanl 帖子，其中包含我使用 mapStateToProps 从 reducer 获取该状态的详细信息。