Redux - Обновление компонента с помощью стороннего 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.info(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.info(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.info(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 сеанса вопросов и ответов на моем буткемпе, но безуспешно, поэтому заранее прошу прощения, если это "повторный пост".