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
})