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

Question

我正在尝试使用带有Redux reducer的Axios，并试图将响应保存到状态，以便打印出来，但当我尝试将图像插入页面时，它返回typeError:state is undefined。我可以对响应进行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);

Answer 1

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

你在这儿少走了几步。

• 创建一个全局减速器。检查组合减速器
• 使用react redux中的Provider在应用程序中传递状态

Answer 2

您正在使用以下行更改状态：

return state.cat = response.data.file

使用redux时，状态是不可变的，因此您可以使用副本来更新状态。因此，您可以按如下方式使用Object.assign：

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

或者更优雅的是，排列运算符：

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

另外，Redux文档包含一些描述如何在各种场景中使用不可变状态的配方。