Nsryjdtyk

I know I'm close but can't figure out what else needs to be done here.

I have an action that displays all of the data I need, I am having trouble getting this data over to my component:

This is the action:

  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

  });

This is the reducer:

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

            });

This is the component:

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

When I click on my redux chrome extension tool, it's showing multiple wishlists as such, but my component is still showing the "initial state" which has the Vizio 4k tv I set in the component. I've check existing questions and have gone to at least 3 Q&A sessions at my bootcamp with no success, so I apologize ahead of time if this is a "repeat post."

There is a difference in the state structure being built by wishlistReducer and what is being expected by the Wishlist component. The Wishlist component is expecting an array of the form:

[

  { text: "", name: "", salesPrice: "" },

]

while state.wishlist is of the following form:

[

  {

    items: [

      { name: "", salesPrice: "", image: "", productUrl: "" }

    ]

  }

]

So it looks like your Wishlist component is actually expecting an item, rather than an entire wishlist. Your Wishlist component should probably look similar to the example below:

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>  

    );

  }

}

Though at this point it is more of a list of wishlists, but hopefully this demonstrates how the state structure is being passed into your Wishlist component.

Also, this is assuming that wishlistReducer is your root reducers. If you are using combineReducers, the state structure will be another level deeper, such as:

combineReducers({

  wishlist: wishlistReducer,

});



const mapStateToProps = state => ({ 

  wishlist: state.wishlist.wishlist

})