Как обновить рендер при обновления state redux?

Question

Есть следующий код

import React,{Component} from "react"
import {connect} from "react-redux"
class Aside extends Component{
  renderAside(){
    const asideItems = this.props.cart
    console.log(asideItems) // Not Working never
    return asideItems.map((item, key) =>{
      return(
        <div className="aside-item" key={key}>
          <div className="aside-item__name">{item.product.name}</div>
        </div>
      )
    })
  }

  render(){
    return (
      <div>
        {this.renderAside()} 
      </div>
    )
  }

}



const mapStateToProps = (state) => {
  console.log(state.asideReducer.cart) // Working when updated cart
  return{
    cart: state.asideReducer.cart
  }
}

export default connect(mapStateToProps)(Aside)

Как сделать что бы при обновления state.asideReducer.cart обновлялся мой рендер? Надо для вывода продуктов что добавились в корзину. Спасибо

Answer 1

Мало информации про то, как устроен ваш store. Если view не обновляется, то это, как правило, ошибка в обновлении store.

Для упрощения дебаггинга зарефакторите ваш Aside компонент. Там не нужен отдельный метод для рендера.

class Aside extends Component {
  render() {
    const { cart } = this.props

    return (
      <div>
        { cart.map((item, key) => {
          return (
            <div className="aside-item" key={key}>
              <div className="aside-item__name">{item.product.name}</div>
            </div>
          );
        })}
      </div>
    );
  }
}

БЛОГ НА HUSL

Как обновить рендер при обновления state redux?

Ответы (1 шт):