Redux - 使用 3rd Party API 更新组件

Question

我知道我已经很接近了，但不知道这里还需要做什么。

我有一个显示我需要的所有数据的操作，我无法将这些数据传输到我的组件：

这是动作：

  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 扩展工具时，它会显示多个愿望清单，但我的组件仍显示“初始状态”，其中包含我在组件中设置的 Vizio 4k 电视。我已经检查了现有的问题，并且在我的训练营中至少参加了 3 次问答环节，但都没有成功，所以如果这是一个“重复帖子”，我提前道歉。

Answer 1

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