Redux - обновление компонента с помощью стороннего API - PullRequest
Новая
       13

Redux - обновление компонента с помощью стороннего API

0 голосов
/ 19 ноября 2018

Я знаю, что я близко, но не могу понять, что еще нужно сделать здесь.

У меня есть действие, которое отображает все нужные мне данные, у меня проблемы с передачей этих данных в мой компонент:

Это действие: 

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

Когда я нажимаю на инструмент расширения Chrome, он показывает несколько списков желаний как таковых, но мой компонент по-прежнему показывает «начальное состояние», в котором установлен Vizio 4k tv, который я установил в компоненте. Я проверил существующие вопросы и прошел как минимум 3 сессии вопросов и ответов на моем буткемпе, но безуспешно, поэтому заранее прошу прощения, если это «повторный пост».

1 Ответ

0 голосов
/ 19 ноября 2018

Существует разница в структуре состояния, создаваемой 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
})
...