Все действия я забиндил, но всё равно не обновляется компонент после обновления осстояние. Почитав на просторах интернета заметил, что люди обычно ссылаются на грязное изменения состояние в редьюсере. Уже попробовал разны варианты, но не помогло. надо обновить статистику раунда полностью и его 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;
Заодно может замечания будут. С удовольствием выслушаю.
