0

Есть условный пример:

function mapStateToProps(state) {
  const { val } = state
  const valName = val.name && ''
  return { valName }
}

Здесь получаться мы проверяем наличие val.name и передаем нужное значение пропсом в компонент. Первый вопрос: есть ли разница, где делать эту проверку, внутри mapStateToProps или внутри метода render самого компонента? Ведь удобно сразу получить в компонент нужное значение, mapStateToProps просто же функция, какая разница где она вызовется.

Второй вопрос:

function mapStateToProps(state) {
  const { val } = state
  return {
     filtredName: val.filter(el => el.name === 'name')
  }
}

Такое код мы во-первых можем оптимизировать например библиотекой reselect, чтобы смотреть изменился объект или нет. Тогда состояние не изменится и render не будет вызван. Но если мы будем делать фильтр в render, то у нас на вход могут быть разные состояния val, а после фильтра всегда одинаковые. Получается будет вызван render где-то лишний раз, пока мы не отфильтруем массив, и не проверим изменился ли он.

Объясните если я что-то неправильно сказал и сформулировал.

1 ответ 1

0

Вопрос 1: Пустая строка это способ отобразить неизвестное значение, лучше отображать в render.

Вопрос 2: Храните значение фильтра в redux состоянии, либо в url...

function mapStateToProps(state, props) {
  // state.filter - значение из redux состояния
  // props.match.params.filter - значение от react-router к примеру.
}

или с селектором

const selector = createSelector(
  (_, props) => props.match.params.filter,
  (state) => state.name,
  (filter, state) => { ... },
);

Лучше не использовать state компонента для такого.

3
  • лучше отображать в render Поясните чем лучше? Вопрос как раз не про пустую строку, а о том где лучше делать вычисление и проверку. Второй ответ не совсем понял. То-есть если у нас есть например данные в state.data и мы хотим их отфильтровать то должны хранить в state ещё и отфильтрованное состояние? Получается мы храним оригинальное состояние и фильтрованное? Если я правильно понял. Но в случае когда нам нужен фильтр, есть шанс что оригинально состояние вообще не понадобится и будет просто так хранится в state. Поясните подробнее, спасибо.
    – DarkSir
    6 июн 2017 в 8:55
  • Если на примере... Есть такой роут /data добавить ещё один /data/:filter и теперь если пользователь фильтрует напимер по deleted /data/deleted получается что часть состояние приложение хранится в url. Это намного лучше, чем если бы оно хранилось в state компонента.
    – alexes
    6 июн 2017 в 12:49
  • Вы храните состояние и значение фильтр. А перед тем как показать фильтруете лишнее на текущий момент. Конкретно в примере с фильтром лучше всего его значение хранить в url.
    – alexes
    6 июн 2017 в 12:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.