React Redux 动作对象未定义

IT技术 javascript reactjs redux react-redux
2021-05-11 08:48:17

我是 React-Redux 的新手,我对 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 };   

减速器.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
    };

    ...

服务.js

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

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

动作.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对象不为空。但是当我引用它时,它是未定义的。请帮忙,因为我被卡住了,无法前进。非常感谢任何帮助。谢谢!

2个回答

在您的根减速器中,您是说“提要”项将包含您的 feedReducer 提供的内容。在您的 feedReducer 中,您返回“feed: action.feed”。

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

你的减速机有问题。您正在改变组件状态,因为当我们改变状态并且组件不会重新渲染时,它存储的状态不会得到更新

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

在您的情况下,Redux 不会检测到状态差异,并且不会通知您的组件商店已更改,您应该返回带有必要更改的新状态副本。希望这能解决问题 如果问题仍然存在,请告诉我。