Redux - 使用第三方更新组件 API
Redux - Updating A Component With 3rd Party API
我知道我已经接近了,但不知道这里还需要做什么。
我有一个显示我需要的所有数据的操作,但我无法将这些数据传送到我的组件:
这是动作:
export const wishListActions = username => dispatch => {
fetch(`${API_BASE_URL}/Wishlist/User/${username}`)
.then(res => res.json())
.then(data => {
(data.map(i => {
dispatch(findWishListSuccess(i.wishlists));
}));
})
.catch(error => console.log(error))
}
export const FIND_WISHLIST_BEGIN = 'FIND_WISHLIST_BEGIN'
export const findWishListBegin = wishlist => ({
type: FIND_WISHLIST_BEGIN,
wishlist
});
export const FIND_WISHLIST_SUCCESS = 'FIND_WISHLIST_SUCCESS'
export const findWishListSuccess = wishlist => ({
type: FIND_WISHLIST_SUCCESS,
wishlist
});
export const FIND_WISHLIST_FAILURE = 'FIND_WISHLIST_FAILURE'
export const findWishListFailure = wishlist => ({
type: FIND_WISHLIST_FAILURE,
wishlist
});
这是减速器:
const initialState = {
//state.products.items is here
wishlist: [{
text: "Category - Christmas",
items: [
{
name: "Fridge",
salePrice: "200",
image: "pictureurl.com",
productUrl: "google.com"
}
]
}],
loading: false,
error: null
};
export default function wishlistReducer(state = initialState, action) {
switch (action.type) {
case FIND_WISHLIST_BEGIN:
return {
...state,
loading: true,
error: null
};
case FIND_WISHLIST_SUCCESS:
console.log(action.wishlist.items);
return Object.assign({}, state, {
wishlist: [
...state.wishlist, {
items: action.wishlist
}
],
loading: false
});
这是组件:
export class Wishlist extends React.Component{
componentDidMount(){
if(window.localStorage.userName){
this.props.dispatch(wishListActions(window.localStorage.userName));
}
}
render(){
const userWishlist = this.props.wishlist.map(i => (
<div key={i.peoductUrl + i.name}>
{console.log(i)}
<div className="category">{i.text}</div>
<div className="name">{i.name}</div>
<div className="price">$ {i.salePrice}</div>
<img className="image" src={i.image} alt={i.name}/>
<a className="listing-url" href={i.productUrl}>Buy Now!</a>
</div>
));
return(
<div className='user-wishlist'>
<h3>{this.props.title}</h3>
{ userWishlist }
</div>
)
}
}
Wishlist.defaultProps= {
title: "My Wishlist",
wishlist: [{
text:"Presents",
name:"VIZIO 4K TV",
salePrice:"200",
}]
}
const mapStateToProps = state => ({
wishlist: state.wishlist
})
export default connect(mapStateToProps)(Wishlist);
当我点击我的 redux chrome 扩展工具时,它显示了多个愿望清单,但我的组件仍然显示 "initial state",它有我在组件中设置的 Vizio 4k 电视。我检查了现有的问题,并在我的训练营参加了至少 3 次问答会议但没有成功,所以如果这是 "repeat post."
,我提前道歉
wishlistReducer
构建的状态结构与 Wishlist
组件所期望的不同。 Wishlist
组件需要一个以下形式的数组:
[
{ text: "", name: "", salesPrice: "" },
]
而 state.wishlist
的形式如下:
[
{
items: [
{ name: "", salesPrice: "", image: "", productUrl: "" }
]
}
]
所以看起来您的 Wishlist
组件实际上需要一个项目,而不是整个愿望清单。您的 Wishlist
组件可能看起来类似于以下示例:
export class Wishlist extends React.Component{
render(){
const userWishlist = this.props.wishlist.map(w => (
<div key={w.name}>
<h3>{w.name}</h3>
{w.items.map(i => (
<div key={i.productUrl + i.name}>
{console.log(i)}
<div className="category">{i.text}</div>
<div className="name">{i.name}</div>
<div className="price">$ {i.salePrice}</div>
<img className="image" src={i.image} alt={i.name}/>
<a className="listing-url" href={i.productUrl}>Buy Now!</a>
</div>
)}
</div>
));
return (
<div className='user-wishlist'>
<h3>{this.props.title}</h3>
{ userWishlist }
</div>
);
}
}
尽管此时它更像是一个愿望清单列表,但希望这能说明状态结构是如何传递到您的 Wishlist
组件中的。
此外,这是假设 wishlistReducer
是您的根减速器。如果使用combineReducers
,状态结构会更深一层,如:
combineReducers({
wishlist: wishlistReducer,
});
const mapStateToProps = state => ({
wishlist: state.wishlist.wishlist
})
我知道我已经接近了,但不知道这里还需要做什么。
我有一个显示我需要的所有数据的操作,但我无法将这些数据传送到我的组件:
这是动作:
export const wishListActions = username => dispatch => {
fetch(`${API_BASE_URL}/Wishlist/User/${username}`)
.then(res => res.json())
.then(data => {
(data.map(i => {
dispatch(findWishListSuccess(i.wishlists));
}));
})
.catch(error => console.log(error))
}
export const FIND_WISHLIST_BEGIN = 'FIND_WISHLIST_BEGIN'
export const findWishListBegin = wishlist => ({
type: FIND_WISHLIST_BEGIN,
wishlist
});
export const FIND_WISHLIST_SUCCESS = 'FIND_WISHLIST_SUCCESS'
export const findWishListSuccess = wishlist => ({
type: FIND_WISHLIST_SUCCESS,
wishlist
});
export const FIND_WISHLIST_FAILURE = 'FIND_WISHLIST_FAILURE'
export const findWishListFailure = wishlist => ({
type: FIND_WISHLIST_FAILURE,
wishlist
});
这是减速器:
const initialState = {
//state.products.items is here
wishlist: [{
text: "Category - Christmas",
items: [
{
name: "Fridge",
salePrice: "200",
image: "pictureurl.com",
productUrl: "google.com"
}
]
}],
loading: false,
error: null
};
export default function wishlistReducer(state = initialState, action) {
switch (action.type) {
case FIND_WISHLIST_BEGIN:
return {
...state,
loading: true,
error: null
};
case FIND_WISHLIST_SUCCESS:
console.log(action.wishlist.items);
return Object.assign({}, state, {
wishlist: [
...state.wishlist, {
items: action.wishlist
}
],
loading: false
});
这是组件:
export class Wishlist extends React.Component{
componentDidMount(){
if(window.localStorage.userName){
this.props.dispatch(wishListActions(window.localStorage.userName));
}
}
render(){
const userWishlist = this.props.wishlist.map(i => (
<div key={i.peoductUrl + i.name}>
{console.log(i)}
<div className="category">{i.text}</div>
<div className="name">{i.name}</div>
<div className="price">$ {i.salePrice}</div>
<img className="image" src={i.image} alt={i.name}/>
<a className="listing-url" href={i.productUrl}>Buy Now!</a>
</div>
));
return(
<div className='user-wishlist'>
<h3>{this.props.title}</h3>
{ userWishlist }
</div>
)
}
}
Wishlist.defaultProps= {
title: "My Wishlist",
wishlist: [{
text:"Presents",
name:"VIZIO 4K TV",
salePrice:"200",
}]
}
const mapStateToProps = state => ({
wishlist: state.wishlist
})
export default connect(mapStateToProps)(Wishlist);
当我点击我的 redux chrome 扩展工具时,它显示了多个愿望清单,但我的组件仍然显示 "initial state",它有我在组件中设置的 Vizio 4k 电视。我检查了现有的问题,并在我的训练营参加了至少 3 次问答会议但没有成功,所以如果这是 "repeat post."
,我提前道歉wishlistReducer
构建的状态结构与 Wishlist
组件所期望的不同。 Wishlist
组件需要一个以下形式的数组:
[
{ text: "", name: "", salesPrice: "" },
]
而 state.wishlist
的形式如下:
[
{
items: [
{ name: "", salesPrice: "", image: "", productUrl: "" }
]
}
]
所以看起来您的 Wishlist
组件实际上需要一个项目,而不是整个愿望清单。您的 Wishlist
组件可能看起来类似于以下示例:
export class Wishlist extends React.Component{
render(){
const userWishlist = this.props.wishlist.map(w => (
<div key={w.name}>
<h3>{w.name}</h3>
{w.items.map(i => (
<div key={i.productUrl + i.name}>
{console.log(i)}
<div className="category">{i.text}</div>
<div className="name">{i.name}</div>
<div className="price">$ {i.salePrice}</div>
<img className="image" src={i.image} alt={i.name}/>
<a className="listing-url" href={i.productUrl}>Buy Now!</a>
</div>
)}
</div>
));
return (
<div className='user-wishlist'>
<h3>{this.props.title}</h3>
{ userWishlist }
</div>
);
}
}
尽管此时它更像是一个愿望清单列表,但希望这能说明状态结构是如何传递到您的 Wishlist
组件中的。
此外,这是假设 wishlistReducer
是您的根减速器。如果使用combineReducers
,状态结构会更深一层,如:
combineReducers({
wishlist: wishlistReducer,
});
const mapStateToProps = state => ({
wishlist: state.wishlist.wishlist
})