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

Question

[DeniSidorenko]

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

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 обновлялся мой рендер? Надо для вывода продуктов что добавились в корзину. Спасибо

Comments

[alex4answ]

вы делайте что-то не так, зачем у вас отдельные методы renderAside и тп, если вы эту функцию используйте строго в рендере ?

странное структурирование, ничего не понятно

Answer 1

[Егор Живагин]

Компонент должен ререндериться автоматически. Если нет -- видимо, у вас state.asideReducer.cart не изменяется, а мутирует. В таком случае, даже если в объекте изменились данные, ссылка на объект остаётся та же, редакс не видит изменения и не перерисовывает компонент
Короче, покажите ваш редьюсер)

Answer 2

[alex4answ]

Посмотрел пару ваших вопросов.

Вы все наугад делайте?, а потом на тостер идете?

Прочитайте документацию, вы лепите полнейшую чушь, не хочу вас задеть, но серьезно, что прошлый вопрос что этот, вы читали что-то про реакт, редакс, хотябы Getting Started раздел док прошли?

Comments

[DeniSidorenko]

Ничего страшного) понимаю. Скажите вы писали про структуру и метод renderAside, можно ли обойтись без него?

[alex4answ]

DeniSidorenko, да, почему вы не сделали примерно так:

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

[DeniSidorenko]

alex4answ, До этого такой же функционал был необходим вывести, посмотрел по туториалам что реализация через функцию тоже возможна. Автор прокомментировал это тем что делает просмотр кода более удобным. Мне такой пример понравился я решил воспользоваться. Ведь по сути то что вы предложили и что я сделал один и тот же функционал в разных исполнениях.

[DeniSidorenko]

alex4answ, Но я согласен с вами что в данном примере ваш вариант куда удобнее. Другое дело что вопрос мой был совсем про другое...

[DeniSidorenko]

alex4answ, Даже при условии что после render() { делаю console.log(this.props.cart) , ничего не выводится

[alex4answ]

DeniSidorenko, я понимаю что ваш вопрос совсем про другое, но прочтите документацию и все подобные вопросы отпадут, при изменении state компонент и его дочерние рендерятся заново (если нет should update).

с Redux история та же, если изменяете ту часть стора которую мапите на компонент, тоже повторный рендер