LINUX.ORG.RU

Поясните за react-redux

 ,


0

2

А что за шляпа, вот так работает

class Container extends React.Component {
  render() {
    const { value } = this.props.data;

    return (<div>{value}</div>);
  }
}

const mapStateProps = store => ({
  data: store.ContainerState.ContainerData
});

export default connect(mapStateProps)(Container);
а вот так нет
class Container extends React.Component {
  render() {
    const { value } = this.props;

    return (<div>{value}</div>);
  }
}

const mapStateProps = store => ({
  value: store.ContainerState.ContainerData.value
});

export default connect(mapStateProps)(Container);

Store:

{
  ContainerState: {
    ContainerData: {
      value: 42
    }
  }
}

Не работает в том плане, что по второму варианту замаппленный контейнер не реагирует на обновление store.

Я всегда пользовался первым вариантом, а тут помощник прислал код со вторым вариантом, и вот такое непонятное поведение.

★★★★★

Подозреваю, тебе стоит загуглить mutating state react и почему так делать не надо

moot ★★★★
()
Ответ на: комментарий от Deleted

Да, такой вариант работает:

const mapStateProps = store => ({
  value: Object.assign({}, store.ContainerState.ContainerData.value)
});

Всем, двум ответившим, thx.

vvn_black ★★★★★
() автор топика
Ответ на: комментарий от vvn_black

Есть ощущение что ты в reducer не правильно обновляешь state, и mapStateToProps не получает нужный апдейт, сложно вообще диагностировать причину ошибки не видя всей цепочки.

value: Object.assign({}, store.ContainerState.ContainerData.value)

А этого воовсе не стоит делать в контейнере.

Berdin
()
Ответ на: комментарий от Berdin

А этого воовсе не стоит делать в контейнере.

Что так? Это лишь враппер, добавляющий пропсы к реакт-компоненту, нет?

vvn_black ★★★★★
() автор топика
Ответ на: комментарий от vvn_black

Суть не в этом, в идеале в этом месте лучше использовать селекторы которым просто отдавать на вход state, все вот эти манипуляции с расширением обьекта без мутации, делаются как раз в reducer, вот к чему я вел.

Berdin
()

Поставь мидлварь redux-freeze, чтобы по ошибке нигде не модифицировался стейт. Иначе это отдебажить почти невозможно.

А за обращение к стору не через селекторы нужно вообще пальцы ломать, так как со временем логика для подготовки данных для отображения начинает дублироваться в разных контейнерах или еще хуже переходит в методы и хуки компонента. Как итог - нечитаемая каша. Для селекторов, к слову, есть отличная либа reselect, которая позволяет их комбинировать и кэшировать результат.

ahushh
()
Ответ на: комментарий от anonymous

Никто не заставляет тебя использовать редакс вместе с реактом. Как альтернатива, можно использовать mobx или вообще сервисы с наиболее подходящей своей реализацией DI. Полная свобода действий, на любой вкус найдется решение.

ahushh
()
Ответ на: комментарий от vvn_black
value: {...store.ContainerState.ContainerData.value}

Лучше клонировать с помощью JSON.parse(JSON.stringify(o)), если есть вложенные объекты

tz4678 ★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.