Почему не обновляется компонент после dispatch?

Question

[Oversec]

Все действия я забиндил, но всё равно не обновляется компонент после обновления осстояние. Почитав на просторах интернета заметил, что люди обычно ссылаются на грязное изменения состояние в редьюсере. Уже попробовал разны варианты, но не помогло. надо обновить статистику раунда полностью и его id

import * as rouletteActions from '../../actions/rouletteActions';


const mapDispatchToProps = (dispatch) => ({
    rouletteActions: bindActionCreators(rouletteActions, dispatch)
});

action

export const startRound = function (round) {
   return {
     type: actions.START_ROUND,
     round
   };
 };

reducer

case constants.START_ROUND:
    return {
      ...state,
      round: { ...state.round, ...action.round }
    };

Может я что-то не так делаю?

UPD: InitState

roulette: {
    isRoll: false,
    done: false,
    round: {
      id: '',
      bets: [],
      roll: '',
      totalBets: [],
      startTime: ''
    },
    historyRolls: []
  }

Полный код reducer

import * as constants from '../constants/rouletteConstants';
import initialState from './initialState'

function rouletteReducer(state = initialState.roulette, action) {
  switch (action.type) {
    case constants.FETCH_ROUND_START:
    return {
      ...state,
      isLoading: true
    };

    case constants.FETCH_ROUND_SUCCESS:
    return {
      ...state,
      isLoading: false,
      error: false,
      round: action.round
    };
    case constants.FETCH_ROUND_ERROR:
    return {
      ...state,
      isLoading: false,
      error: action.error
    };
    case constants.ADD_BET:
    return {
      ...state,
      round: state.round.bets.concat(action.bet)
    };
    case constants.START_ROLL:
    return {
      ...state,
      round: { ...state.round, roll: action.roll },
      isRoll: true
    };
    case constants.START_ROUND:
    return {
      ...state,
      round: { ...state.round, ...action.round }
    };
    case constants.JOIN_ROULETTE:
    return {
      ...state,
      done: true,
      round: { ...state.round, ...action.round }
    };
    case constants.REFRESH_HISTORY:
    return {
      ...state,
      historyRolls: action.historyRolls
    };
    case constants.ADD_TO_HISTORY:
    return {
      ...state,
      historyRolls: action.historyRolls.map( (item, index) => {
        if(index !== historyRolls.length - 1) {
          return action.roll;
        }
        return item;
      })
    };
    case constants.FINISH_ROLL:
    return {
      ...state,
      isRoll: false
    };
    default:
    return state;
  }
}

export default rouletteReducer;

Код компонента ProgressBar.jsx В нём есть прогресс бар, который отсчитывает время до конца раунда, он и должен изменяться. Store меняется после конца раунда, с ним всё нормально, только компонент не обновился

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class ProgressBar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      text: `Prepare to start`,
      startTime: this.props.startTime
    }
  }

  progressBar() {
    if(this.state.startTime  > 0.00) {
      setTimeout(() => {
        this.setState({
          startTime: (this.state.startTime - 0.02).toFixed(2),
          text: `End of raund after ${this.state.startTime}`
        });
        this.progressBar(this.state.startTime);
      }, 18);
    } else {
      this.setState({ text: 'Roll!' });
    }
  }

  componentDidMount() {
    if(this.state.startTime) {
      this.state.startTime.toFixed(2);
      this.progressBar();
    }
    else {
      this.setState({ text: 'Roll was started' });
    }
  }

  componentWillReceiveProps(nextProps) {
    if(!nextProps.isRoll && nextProps.roll) {
        this.setState({ text: `Roll is ${nextProps.roll}` });
    }
  }

  render() {

    return (
      <div className="progress">
        <div className="banner">{this.state.text}</div>
        <div id="progress-bar"><div className="bar" ref={(progress) => this.progress = progress} style={{ width: `${this.state.startTime * 100 / 20}%` }}></div></div>
      </div>
    );
  }
}

export default ProgressBar;

Заодно может замечания будут. С удовольствием выслушаю.

Comments

[Islam Ibakaev]

покажи редьюсер полностью, код компонента, свойства объекта round

[Oversec]

Islam Ibakaev: Обновил

[Islam Ibakaev]

не вижу где ты диспатчишьSTART_ROUND?

зачем это - this.state.startTime.toFixed(2) в componentDidMount() ?

Откуда получает пропсы этот компонент? Если от родителя - покажи родителя, если из стора - покажи законнекченную часть.

Answer 1

[Vlad Feninets]

так по коду вроде бы все ок.
попробуйте вывести console.log(action) - в редьюсере, доходят ли туда экшены?

Comments

[Islam Ibakaev]

или подтянуть redux-logger

[Vlad Feninets]

Islam Ibakaev: или Redux DevTool

[Islam Ibakaev]

Vlad Feninets: можно и так (даже лучше). я исходил из того, что начинающему будет легче подтянуть redux-logger.

[Oversec]

там всё нормально, я обновил описание вопроса. Это и настораживает, состояние меняется без проблем и как надо, а вот компонент не обновляется

[Vlad Feninets]

продебажьте componentWillReceiveProps, сделайте console.log(nextProps)
туда что-то приходит?

[Oversec]

Vlad Feninets: всё приходит. Кажется понял ошибку: я запускаю таймер только в componentDidMount, а его потом надо запускать в componentWillReceiveProps. Но тогда вопрос, как мне проверять что изменилось именно StartTime и запускать с ним таймер?

[Vlad Feninets]

Oversec: делайте проверку в componentDidUpdate без таймаутов, потому что сетСтейт по своей природе асинхронный и нельзя гарантировать, что он будет вызываться в определенные интервалы.

а так setState будет тригеррить componentDidUpdate

[Oversec]

Vlad Feninets: Спасибо, теперь буду знать что в componentWillReceiveProps state ещё не меняется

[Vlad Feninets]

Oversec: держите - busypeoples.github.io/post/react-component-lifecycle
будет полезно