Куда я могу отправить действие - Redux?

Question

Я работаю над приложением musi c, и у меня есть квота на покупку, которая позволяет пользователям использовать приложение.

Так что, если пользователь проигрывает 20 треков musi c, я появлюсь ему модал или что-то в этом роде.

Так что у меня есть компонент, который для игры musi c имя "контроллера", как <MusicPlayer/>,

Я добавляю его на каждом экране, у меня есть musi c треков там, когда пользователь нажимает на любую карту трека. Я перемещаю их к экрану, который содержит

, поэтому я хочу сделать некоторый счетчик, когда пользователь, играющий музыку, c увеличивает его + 1

, так я не знаю, где я могу сделать эту отправку, в компонентах MusicPlayer?

или на каждом экране, который содержал этот компонент, и передать его как реквизиты?

код

actions / countPlayAction. js

import {SET_COUNT} from './types';

export const setCount = count => {
  return {
    type: SET_COUNT,
    payload: count,
  };
};

reducer / countPlayReducer. js

import {SET_COUNT} from '../actions/types';

let initial_state = {
  count: 0,
};
const countPlayReducer = (state = initial_state, action) => {
  switch (action.type) {
    case SET_COUNT:
      state = {
        ...state,
        count: state.count + action.payload,
      };
      break;
  }
  return state;
};

export default countPlayReducer;

musicPlayer компонент

class MusicPlayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tunes: props.tunes,
      currentTrackIndex: props.currentTrackIndex,
      rate: 1,
      duration: 1,
      currentTime: 0,
      paused: true,
      loading: true,
    };
  }

  onLoad = data => {
    this.setState({
      duration: Math.floor(data.duration),
      loading: false,
      paused: true,
    });
  };

  render() {
    return (
      <View>
        <View>
          <Video
            ref={ref => {
              this.player = ref;
            }}
            source={{
              uri: this.state.tunes[this.state.currentTrackIndex].url,
            }}
            paused={this.state.paused}
            playInBackground={true}
            playWhenInactive={true}
            onLoad={this.onLoad}
            onProgress={this.onProgress.bind(this)}
            onEnd={this.onEnd}
            controls={false}
          />
          <View style={styles.time}>
            <View style={styles.timeChildView}>
              <Text style={styles.timeChildViewText}>
                {this.minutesAndSeconds(this.state.currentTime)}
              </Text>
            </View>
            <View style={styles.timeChildView}>
              <Text style={styles.timeChildViewText}>
                {this.minutesAndSeconds(this.state.duration)}
              </Text>
            </View>
          </View>

          <View style={styles.slider}>
            {/* For circle play  */}
            <Slider
              thumbTintColor="#ff4865"
              maximumTrackTintColor="grey"
              minimumTrackTintColor="#ff4865"
              style={styles.seekBar}
              step={1}
              minimumValue={0}
              maximumValue={this.state.duration}
              value={this.state.currentTime}
              onValueChange={this.changeValue}
              onSlidingComplete={this.onSlidingComplete}
            />
          </View>

          <View style={styles.controls}>

            {this.state.loading ? (
              <ActivityIndicator size="large" color="#ff4865" />
            ) : (
              <View style={styles.flexRow}>
                <View>
                  {!this.state.paused ? (
                    <Button
                      transparent
                      style={styles.btnSection}
                      color="white"
                      onPress={() =>
                        this.setState({paused: !this.state.paused})
                      }>
                      <Icon name="md-pause" style={styles.iconColor} />
                    </Button>
                  ) : (
                    <Button
                      transparent
                      style={styles.btnSection}
                      color="white"
                      onPress={() =>
                        this.setState({paused: !this.state.paused})
                      }>
                      <Icon name="md-play" style={styles.iconColor} />
                    </Button>
                  )}
                </View>
              </View>
            )}
          </View>
        </View>
      </View>
    );
  }
}

export default MusicPlayer;

То, что я сделал, это увеличение счетчика +1 при каждом воспроизведении трека, но я не знаю, правильно ли это не

в музыке c проигрыватель

 onLoad = data => {
    this.setState({
      duration: Math.floor(data.duration),
      loading: false,
      paused: true,
    });
    this.props.setCount(1)
    reactotron.log(store.getState());
  };

const mapDispatchToProps = dispatch => {
  return {
    setCount: count => {
      dispatch(setCount(count));
    },
  };
};
// export default MusicPlayer;
export default connect(null, mapDispatchToProps)(MusicPlayer);

Answer 1

Это выглядит логично, хотя есть ощущение накладных расходов, связанных с избыточностью (это обычно в небольших приложениях). Я бы также посоветовал изменить setCount на incrementCount, чтобы вам не нужно было иметь абсолютное значение в компоненте, которое увеличивает значение.

Вы следовали принципу Компонент-Контейнер, что неплохо, но в вашем случае вы не получаете никаких данных от mapStateToProps, и это заставило вас иметь некоторый шаблонный код внутри mapDispatchToProps.

Идея, как это упростить - вы можете обернуть компонента с connect, и тогда у вас будет dispatch доступный под props объектом внутри вашего компонента, так что вы можете немедленно отправить действие из onLoad. Это будет выглядеть так:

onLoad = data => {
    this.props.dispatch(setCount(1));
};

Последняя пара слов, если у вас нет других вариантов использования для редукса, взгляните на React.Context , как у вас будет поменьше с ним :))