我正在尝试将存储中的数据加载到我的容器中,然后我希望将其传递给演示组件。我似乎无法让容器查询数据,然后不确定如何将数据路由回前端。
[此外,我真的不确定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;
}
};
查看连接输出似乎是错误的代码。
您将组件导出为导出默认的connect(mapStateToProps,mapDispatchToProps)((ListingView)] >>;
但应该是导出默认的connect(mapStateToProps,mapDispatchToProps)((ListingViewContainer)
;