React-无法获得反应容器从存储加载数据并推送到UI组件

问题描述 投票:0回答:1

我正在尝试将存储中的数据加载到我的容器中,然后我希望将其传递给演示组件。我似乎无法让容器查询数据,然后不确定如何将数据路由回前端。

[此外,我真的不确定ListStore.actionCreators是否应该成为ListingViewContainerProps的一部分,因为在render函数中在ListingView上设置该道具似乎很奇怪。但是,如果我不这样做,那么我不确定该如何进入商店。

这是我的容器类:

import * as React from 'react';
import { Listing } from '../models/Listing';
import { connect } from 'react-redux';
import * as ListingStore from '../store/ListingStore';
import ListingView from './ListingView';

export type ListingContainerState = {
    listings: Listing[],
}
export type ListingViewContainerProps = ListingContainerState &
    typeof ListingStore.actionCreators;

export class ListingViewContainer extends React.Component<ListingViewContainerProps> {

    constructor(props: ListingViewContainerProps) {
        super(props)
        this.requestListings = this.requestListings.bind(this);
    }

    public componentDidMount() {

    }

    public requestListings() {
        return this.props.requestListings();
    }

    public render() {
        const { listings } = this.props;
        return (
            <ListingView listings={listings} requestListings={this.requestListings} />
            );
    }
}


const mapDispatchToProps = (dispatch: any, props: ListingViewContainerProps) => ({

});

const mapStateToProps = (state: ListingViewContainerProps) => ({
    listings: state.listings
});

export default connect(mapStateToProps, mapDispatchToProps)(ListingView);

以及我的演示组件:

import * as React from 'react';
import { connect } from 'react-redux';
import { Listing } from '../models/Listing';
import { ListingViewContainerProps } from '../components/ListingViewContainer';

const ListingView = (props: ListingViewContainerProps) => {

    return (
        <React.Fragment>
            <div className="grid-container">
                {props.listings.map((listing: Listing) =>
                    <div className="grid-item">
                        <div className="grid-item-container">
                            <a href="#" className="favorite">♥</a>
                            <div className="grid-img-container">
                               <span >{listing.name}</span>
                            </div>
                        </div>    
                    </div>
                )}
            </div>
            </React.Fragment>
    );

}

和我的商店:

import { Action, Reducer } from 'redux';
import { AppThunkAction } from '.';
import { Listing } from '../models/Listing';
import { ListingContainerState } from '../components/ListingViewContainer';

export interface RequestListings
{
    type: 'REQUEST_LISTING'
    listings: Listing[];
}
export interface RecieveListings
{
    type: 'RECIEVE_LISTING'
    listings: Listing[];
}

export type KnownAction = RequestListings | RecieveListings;

export const actionCreators = {

    requestListings: (): AppThunkAction<KnownAction> => (dispatch, getState) => {
        const appState = getState();

        if (appState && appState.listings) {
            fetch(`listings`)
                .then(response => response.json() as Promise<Listing[]>)
                .then(data => {
                    dispatch({ type: 'RECIEVE_LISTING', listings: data });
                });
        }
    }


};

const unloadedState: ListingContainerState = { listings: [] };

export const reducer: Reducer<ListingContainerState> = (state: ListingContainerState | undefined, incomingAction: Action): ListingContainerState => {
    if (state === undefined) {
        return unloadedState;
    }

    const action = incomingAction as KnownAction;
    switch (action.type) {
        case 'REQUEST_LISTING': return {
            listings: state.listings
            };
        case 'RECIEVE_LISTING': return {
                listings : action.listings
            };
        default:
            return state;
    }
};
reactjs typescript redux
1个回答
0
投票

查看连接输出似乎是错误的代码。

您将组件导出为导出默认的connect(mapStateToProps,mapDispatchToProps)((ListingView)] >>;

但应该是导出默认的connect(mapStateToProps,mapDispatchToProps)((ListingViewContainer)

;
© www.soinside.com 2019 - 2024. All rights reserved.