Объект действия React Redux не определен

Question

Я новичок в React-Redux и у меня возникла проблема с редукционным объектом действия.Когда я печатаю объект на консоли, он отображается правильно, как показано ниже:

Пожалуйста, проверьте мои коды.

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;

Это скриншотиз журналов:

Таким образом, ясно, что объект подачи не пустой.Но когда я ссылаюсь на это, оно не определено.Пожалуйста, помогите, потому что я застрял и не могу двигаться вперед.Любая помощь приветствуется.Спасибо!

Answer 1

Есть проблема с вашим редуктором. Вы изменяете состояние компонента, поскольку его хранилище не обновляется, когда мы изменяем состояние, а компонент не рендерится

case feedConstants.GETBYID_SUCCESS:
    console.log("GETBYID_SUCCESS: " + JSON.stringify(action.feed));
    return {
      ...state,
      feed: action.feed
    };

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

Answer 2

В вашем корневом редукторе вы говорите, что элемент «каналы» будет содержать то, что дает ваш feedReducer.В вашем feedReducer вы возвращаете «feed: action.feed».

Таким образом, в вашем mapStateToProps вы должны отображать «каналы», а не «канал».Когда вы затем прочитаете значение каналов, оно будет содержать объект, такой как {feed: xxx}, где xxx - это то, что изначально было в вашем действии после вызова API.