Question

我还在学习Redux。我的目标是在react-native和redux中创建一个进度条，我希望每秒更新一次以播放，暂停，快退和快进（以2x，6x和30x速度快退/快进）。我从play和rewind2x开始，因为我认为我可以从那里找出其他人。

我有一个容器，该容器向下传递布尔属性，该布尔属性告诉我正在按下的键（现在播放或快退），并且我正在获取提供当前时间，程序开始时间和程序结束时间的数据。挂载时，进度条处于播放模式，当前时间-程序开始时间为我提供了进度条的起点。和程序结束时间-程序开始时间为程序长度。我最初可以很好地获得数据。

例如（1小时长节目中30分钟） currentProgress = 1800 programLength = 3600

但是，我相信在setInterval之后它会重置为零。我不确定为什么吗？我可以在setInterval中使用redux进行更新吗？我在某处读到它不是最好的事情，但是那我该如何每秒更新一次呢？我应该采取完全不同的方式吗？

希望这是足够的信息，如果您需要更多信息，请告诉我。

操作

//SETS PROGRAM LENGTH AND CURRENT PROGRESS
import {
    GET_PROGRAM_LENGTH,
    GET_CURRENT_PROGRESS
} from '../types/progressbar';

export const getProgramLength = (programLength) => ({
    type: GET_PROGRAM_LENGTH,
    programLength
});

export const getCurrentProgress = (currentProgress) => ({
    type: GET_CURRENT_PROGRESS,
    currentProgress
 });

减速器

import {
    GET_PROGRAM_LENGTH,
    GET_CURRENT_PROGRESS
} from '../types/progressbar';

const initialState = {
    programLength:  0,
    currentProgress: 0
}

export default (state = initialState, action) => {
    switch (action.type) {
        case GET_PROGRAM_LENGTH:
            return{
                ...state,
                programLength: action.programLength
            };
        case GET_CURRENT_PROGRESS:
            return{
                ...state,
                currentProgress: action.currentProgress
            };
        default:
            return state;
    }
};

组件的某些 我基本上只是在标记中渲染（currentProgress / ProgramLength * widthOfProgressBar）

export default class ProgressBar extends Component {

constructor() {
    super();

    this.state = {
        bounceValue: new Animated.Value(200),
    }

    this.timerInterval = null;
    this.closeProgressBar = this.closeProgressBar.bind(this);
}

componentDidMount() {
    const { programLength, currentProgress, onGetProgramLength, onGetCurrentProgress } = this.props;
    const { isPlaying } = this.props.currentProgressState;

    onGetProgramLength(moment(this.props.channelInfo.programs[0].end).diff(this.props.channelInfo.programs[0].start) / 1000);
    onGetCurrentProgress(moment(this.props.currentTime).diff(this.props.channelInfo.programs[0].start) / 1000)

    this.timerInterval = setInterval(()=>{
        console.log("Is Playing", isPlaying);
        console.log("current progress", currentProgress);
        let newCurrentProgress = currentProgress + 1;
        onGetCurrentProgress(newCurrentProgress);
    }, 1000);

Answer 1

在this.props.currentProgress中使用setInterval，而不要从componentDidMount第一行的props中破坏它。这样，每次间隔回调运行时都会使用最新的值。

通常，使用超出范围的变量的函数（在这种情况下，您将this.props.currentProgress的值分配给名为currentProgress的变量）将继续使用该变量的值当他们重新运行。您不会使用更新后的值currentProgress重新分配this.props.currentProgress变量。

解决您问题的另一种方法是从currentProgress回调内的道具中破坏setInterval。

为什么我的变量在react-native和redux中重置为零？

1 个答案: