Как предотвратить диспетчерское действие для повторного рендеринга экрана - redux?

Question

Я использую приставку для отправки действия, это триггер 'true / false',

Так что у меня есть модал нижнего листа, содержащий 'mini-player', когда я открываю его, модаль высоты роста содержит контроллер игрока .

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

, но проблема заключается в том, что действие отправляет его обратно модальный с минимальной высоты "мини-плеер"

Gif

Так, как я могу решить это?

Другими словами, предотвратить повторную визуализацию модала?

Код

Контроллер плеера

<View>

 <View style={{paddingHorizontal: 10}}>
   <Video
     ....
       paused={this.props.isPause} // redux store
      ....
   />

 </View>

  {!this.props.isPause ? (
      <Button
        onPress={() => this.props.isPauseTrigger(true)}> // redux action
          <Icon name="md-pause" style={styles.iconColor} />
      </Button>
       ) : (
          <Button
             onPress={() => this.props.isPauseTrigger(false)}> // redux action
               <Icon name="md-play" style={styles.iconColor} />
          </Button>
  )}
 </View>

Компонент мини-плеера, который я использовал, реагировать native-reanimated-bottom-sheet '

const renderHeader = () => {
    const animatedBackgroundOpacity = Animated.sub(
      1,
      animatedHeaderContentOpacity,
    );
    return (
      <View onPress={onHeaderPress} key={'header-container'}>

          <Animated.View
            intensity={100}
            tint={'default'}
            style={[
              styles.headerContentContainer,
              {
                opacity: animatedHeaderContentOpacity,
              },
            ]}>               

            <View>
             ....
              {props.isPause ? ( // Redux State
                <TouchableOpacity
                  onPress={() => {
                    props.isPauseTrigger(false); // Redux action
                    console.log('should play?', props.isPause);
                  }}
                  style={styles.headerActionButton}>
                  <Ionicons color="#282A36" name="ios-play" size={30} />
                </TouchableOpacity>
              ) : (
                <TouchableOpacity
                  onPress={() => {
                    props.isPauseTrigger(true); // Redux action
                    console.log('should pause?', props.isPause);
                  }}
                  style={styles.headerActionButton}>
                  <Ionicons color="#282A36" name="ios-pause" size={30} />
                </TouchableOpacity>
              )}
            </View>

          </Animated.View>
      </View>
    );
  };




 const renderContent = () => {
       return (
        <Player />
    );
  };

Что я пробовал

Когда я изменяю свойство приостановки в <Video /> для использования локального состояния' внутри компонента проигрывателя контроллера ', Он хорошо работает без каких-либо проблем, как в GIF Но Я хочу изменить значок, когда я минимизирую нижнего игрока.

, поэтому он не слушает состояние притока, потому что я использую локальное состояние

Answer 1

Какой ваш родительский компонент? Как вы управляете открытием / закрытием модального режима, и если он работает с состоянием, и все, что вам нужно, - это кнопка / пауза воспроизведения / воспроизведения, которую вы можете поднять, т.е. вам не нужно хранить в избыточном количестве.

Так на родителя: State: player: "playing"

Fun c updatePlayer (mode) this.setState (player: mode)

И в вашем модальном компе где бы вы с ним не покончили и вам было весело c, чтобы closeModal () просто имел this.props.updatePlayer (this.state.playerState), который будет обновлять состояние родительского элемента.

Answer 2

React Рендеринг компонентов на основе изменений в реквизитах или состояниях. Вы можете использовать componentShouldUpdate метод жизненного цикла, чтобы предотвратить поведение по умолчанию. В зависимости от того, как вы работаете с открытым / закрытым режимом мини-плеера, могут быть и другие решения.