Irgendwie immer aktualisiert Zustand in Reducer

Question

Ich bin ein Anfänger in react.js. Ich mache ein Brettspiel als Anfängerprojekt. Es gibt eine Komponente, die würfelt. Wenn der Würfel gewürfelt wird, wird eine Aktion ausgelöst, so dass der Status geändert wird, um die Werte dieses gerollten Würfels widerzuspiegeln. Aber im Reduzierer sind sowohl die Werte von Zustand als auch action.data gleich. Wie ist das möglich?

Ich habe einen Würfel Komponente rollen, die diese zurück:

Wenn Sie auf die Schaltfläche klicken, wird eine Aktion ausgelöst wird, das Update den Zustand sollte durch Würfel Werte in ihm hinzufügen.

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 Minderer:

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

Mit Redux, in den Reduzierungen, jedes Mal wenn Sie einen neuen Zustand zurückkehren. Anstatt also diese beiden Linien:

const newTurn = Object.assign(state.currentTurn, action.data); 
return Object.assign(state, { currentTurn: newTurn }); 

Sie sollten so etwas wie diese

const newTurn = Object.assign({}, state.currentTurn, action.data); 
return Object.assign(
    {}, 
    state, 
    { currentTurn: newTurn} 
) 

Das Problem mit Object.assign schreiben soll. Lesen Sie hier mehr: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign