React Redux 动作对象未定义 [英] React Redux action object is undefined

问题描述

我是 React-Redux 的新手，我在使用 redux 操作对象时遇到了问题.当我将对象打印到控制台时，它正确显示如下:

I am new to React-Redux and I have a problem with redux action object. When I am printing the object to the console, it displays correctly as shown below:

请检查我的代码.

FeedPage.jsx

class FeedPage extends React.Component {
    componentDidMount() {
        const { id } = this.props.match.params;
        this.props.dispatch(feedActions.getById(id));
        console.log("props", this.props);
    }

    render() {
        const { user, feed } = this.props;

    ... 

function mapStateToProps(state) {
    const { feed, authentication } = state;
    const { user } = authentication;
    console.log(JSON.stringify(feed));
    return {
        user,
        feed
    };
}

const connectedFeedPage = connect(mapStateToProps)(FeedPage);
export { connectedFeedPage as FeedPage };   

reducer.js

export function feeds(state = {}, action) {
switch (action.type) {
    case feedConstants.GETBYID_REQUEST:
    return {
        loading: true
    };
    case feedConstants.GETBYID_SUCCESS:
    console.log("GETBYID_SUCCESS: " + JSON.stringify(action.feed));
    return {
        feed: action.feed
    };
    case feedConstants.GETBYID_FAILURE:
    return { 
        error: action.error
    };

    ...

service.js

function getById(id) {
    const requestOptions = {
        method: 'GET',
        headers: authHeader()
    };

    return fetch(`${config.apiUrl}/feed/${id}`, requestOptions).then(handleResponse);
}   

actions.js

function getById(id) {
    return dispatch => {
        dispatch(request());

        feedService.getById(id)
            .then(
                feed => dispatch(success(feed)),
                error => dispatch(failure(error.toString()))
            );
    };

    function request() { return { type: feedConstants.GETBYID_REQUEST } }
    function success(feed) { return { type: feedConstants.GETBYID_SUCCESS, feed } }
    function failure(error) { return { type: feedConstants.GETBYID_FAILURE, error } }
}

更新:

根减速器

import { combineReducers } from 'redux';

import { authentication } from './authentication.reducer';
import { registration } from './registration.reducer';
import { users } from './users.reducer';
import { alert } from './alert.reducer';
import { feeds } from './feeds.reducer';

const rootReducer = combineReducers({
    authentication,
    registration,
    users,
    alert,
    feeds
});

export default rootReducer;

这是日志截图:

所以很明显feed对象不为空.但是当我引用它时，它是未定义的.请帮忙，因为我被卡住了，无法前进.非常感谢任何帮助.谢谢！

So it is clear that feed object is not empty. But when I am referencing it, it is undefined. Please help as I am stuck and cannot move forward. Any help is great appreciated. Thank you!

推荐答案

在您的根 reducer 中，您是说feeds"项将包含您的 feedReducer 提供的内容.在您的 feedReducer 中，您返回feed: action.feed".

In your root reducer, you are saying that the item "feeds" will contain what your feedReducer gives it. In your feedReducer you return "feed: action.feed".

因此，在您的 mapStateToProps 中，您应该映射提要"，而不是提要".然后，当您读取 feeds 值时，它将包含一个对象，例如 { feed: xxx }，其中 xxx 是您在调用 API 后的操作最初包含的内容.

So, in your mapStateToProps, you should be mapping "feeds", not "feed". When you then read the feeds value, it will contain an object such as { feed: xxx } where xxx is what your action originally had in it after your API call.

这篇关于React Redux 动作对象未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！