React Redux API 调用，数据没有返回到组件

Question

在过去的几天里，我一直在做我的Redux api调用。 我实际上在将数据返回视图组件时遇到了问题。 目前，我能够在动作生成器中看到数据，所以我知道至少我能够获得它。 但是，视图中未显示任何内容。 我想这可能与加载时有关。 这就是为什么我尝试在组件渲染时加载它的原因。 https://djangoandreact.herokuapp.com/user/1 是没有加载的内容。

代码沙盒：https://codesandbox.io/s/zlor60q3jm?from-embed 最后应该可以转到/user/1，类似于转到/1 调出一篇文章(艰难的希望(

下面是视图组件：

import React from "react";
import { connect } from "react-redux";
import { fetchUser } from "../store/actions/userActions";
class UserDetailView extends React.Component {
componentDidMount() {
const userID = this.props.match.params.userID;
fetchUser(userID); //fixed
}
render() {
const { user } = this.props.user;
console.log(user);
return (
<div>
<h3>{user.username}</h3>
</div>
);
}
}
const mapStateToProps = state => ({
user: state.user
});
const mapDispatchToProps = (dispatch, ownProps) => ({
fetchUser: dispatch(fetchUser(ownProps.match.params.userID))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(UserDetailView);

动作生成器

import axios from "axios";
import { thunk } from "react-redux";
export function fetchUser(userID) {
console.log(userID);
return dispatch => {
return axios.get(`/api/user/${userID}`).then(res => {
dispatch(fetchUserSuccess(res.data));
console.log(res.data); // loads data
});
};
}
// Handle HTTP errors since fetch won't.
function handleErrors(response) {
if (!response.ok) {
throw Error(response.statusText);
}
return response;
}
export const FETCH_USER_BEGIN = "FETCH_USER_BEGIN";
export const FETCH_USER_SUCCESS = "FETCH_USER_SUCCESS";
export const FETCH_USER_FAILURE = "FETCH_USER_FAILURE";
export const fetchUserBegin = () => ({
type: FETCH_USER_BEGIN
});
export const fetchUserSuccess = user => ({
type: FETCH_USER_SUCCESS,
payload: { user }
});
export const fetchUserFailure = error => ({
type: FETCH_USER_FAILURE,
payload: { error }
});

减速器(可能没问题(：

import {
FETCH_USER_BEGIN,
FETCH_USER_SUCCESS,
FETCH_USER_FAILURE
} from "../actions/actionTypes";
const initialState = {
user: {},
loading: false,
error: null
};
export default function userReducer(state = initialState, action) {
switch (action.type) {
case FETCH_USER_BEGIN:
return {
...state,
loading: true,
error: null
};
case FETCH_USER_SUCCESS:
return {
...state,
loading: false,
user: action.payload.user
};
case FETCH_USER_FAILURE:
return {
...state,
loading: false,
error: action.payload.error,
user: {}
};
default:
return state;
}
}

Answer 1

伙计们。 我找到了。

case FETCH_USER_SUCCESS:
return {
...state,
loading: false,
user: action.payload.user
};

用户应该是user:action.payload

此外，用户操作应该是

export const fetchUserSuccess = user => ({
type: FETCH_USER_SUCCESS,
payload:  user 
})

呜呜。 但是，老实说，在过去的两个不眠之夜里，我学到了很多关于 Redux 的知识，这是值得的。 真的是。 现在，我知道动作生成器是什么和做什么，而不是复制意大利面，以及减速器(obvi(