Somehow getting updated state in reducer - reactjs

Question

I am a beginner in react.js. I am making a board game as a beginner project. There is a component which rolls the dice. When the dice is rolled, an action is dispatched so that the state is changed to reflect values of that rolled dice. But in the reducer, both the values of state and action.data are same. How is that possible?
I have a dice rolling component which return this:
return (
<div>
<button
onClick={this.rollDice.bind(this)}
>
Roll dice!
</button>
<TurnDisplay dispatch={this.dispatch} />
<BoardContainer dispatch={this.dispatch} />
</div>
);
When you click the button, an action is dispatched, which is supposed update the state by adding dice values in it.
rollDice(){
console.log("this.props ||||| rollDice()", this.props);
if(this.props.isDiceRolled){
alert("Move the marker...");
return;
}
this.props.dispatch({
type: "ROLL_DICE",
data: {
dice: Math.ceil(Math.random() * 5),
isDiceRolled: true
}
});
}
In reducer:
switch(action.type){
.
.
.
case "ROLL_DICE": {
console.log("ROLL_DICE");
console.log(state, action.data);
const newTurn = Object.assign(state.currentTurn, action.data);
return Object.assign(state, { currentTurn: newTurn });
}
default: {
return state;
}
}

Answer 1

With Redux, in the reducers, every time you have to return a new state.
So instead of these two lines:
const newTurn = Object.assign(state.currentTurn, action.data);
return Object.assign(state, { currentTurn: newTurn });
You should write something like this
const newTurn = Object.assign({}, state.currentTurn, action.data);
return Object.assign(
{},
state,
{ currentTurn: newTurn}
)
The problem should be with Object.assign. Read more here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign