Устранение избыточности между различными mapStateToProps

Question

Мой редукционный магазин имеет следующую структуру:

{ A: {item1, item2, item3},

 .....
  F : {item1, item2, item3},

  a : {anotherItem1, anotherItem2}

  .....
  z : {anotherItem1, anotherItem2}
}

То есть, он плоский, а свойства имеют нормализованную структуру. Проблема в том, что у меня есть около 8 различных экранов, многие из которых захотят получить доступ к большому количеству определенных элементов из этих свойств. Это означает, что многие из моих mapStateToProps функций имеют избыточный код.

Например, предположим, что Screen1 определяет mapStateToProps следующим образом

mapStateToProps(state){
 aitem1 : stata.a.item1,
 aFormatted : formatFunction(state.a.item2, state.a.item3)
 bitem1: state.b.item1,
 bFormatted : formatFunction(state.b.item2,  state.b.item2)
 ...
}

Теперь предположим, что Screen2 также хочет, чтобы его реквизиты были в том же состоянии. а также некоторые другие свойства. Тогда должен Screen2 иметь функции mapStateToProps, подобные этой

mapStateToProps(state){
 aitem1 : stata.a.item1,
 aFormatted : formatFunction(state.a.item2, state.a.item3)
 bitem1: state.b.item1,
 bFormatted : formatFunction(state.b.item2,  state.b.item2)
 ...
 other stuff
}

Проблема только усугубляется, если экраны 3 и 4 тоже нуждаются в этом. Так как же мне избежать этой проблемы?

Answer 1

Вы можете написать отдельную функцию, которая выбирает определенную часть состояния и вызывать ее в ваших mapStateToProps функциях:

const getDataParts = state => ({
   foo: state.foo,
   bar: state.baz,
});

Тогда в mapStateToProps используйте это как:

const mapStateToProps = state => ({
    ...getDataParts(state),
    otherProp: state.someOtherProp,
});

EDIT

Имейте в виду, что mapStateToProps может вызываться при при каждом изменении состояния. Если ваш селектор выполнит какие-либо вычисления, он создаст новые реквизиты для компонента, которые будут перерисованы, даже если результат расчета будет таким же. Чтобы предотвратить это, вы должны использовать запомненные селекторы, такие как библиотека reselect.

Дополнительные пояснения и примеры см., Например, Idiomatic Redux: использование селекторов выбора для инкапсуляции и производительности .