Saving value on Action or Reducer? - reactjs

Question

Im trying to have my players to lauch dices and then save values.
Right now whats happening is that the values always reset so only 1 and 0 are generated.
On a working example i would like to see the values being incremented like in a game, and see a player win 5-2 or 6-0 for example.
import { GENERATE_NUMBER } from './types';
import generateDiceNumber from '../util/DiceNumber';
export const rollDice = () => {
return dispatch => {
const result = [generateDiceNumber(), generateDiceNumber()];
let playerWins = 0;
let cpuWins = 0;
if (result[0] > result[1]) {
playerWins++;
} else if (result[0] < result[1]) {
cpuWins++;
}
return dispatch({
type: GENERATE_NUMBER,
payload: {
result,
playerWins,
cpuWins
}
});
};
};
//missing error validation ofc
This is my action
import { GENERATE_NUMBER, PLAYER_RESULT, CPU_RESULT } from '../actions/types';
const initialState = {
number: [],
playerWins: 0,
cpuWins: 0
};
export default function(state = initialState, action) {
switch (action.type) {
case GENERATE_NUMBER:
return {
...state,
number: action.payload.result,
playerWins: action.payload.playerWins,
cpuWins: action.payload.cpuWins
};
default:
return state;
}
}
I want to do this without messing up my reducer or the reducer structure. Whats the best way to do this please?

Answer 1

You are replacing the value on your store, you need to increment it. Try this:
return {
...state,
number: action.payload.result,
playerWins: state.playerWins + action.payload.playerWins,
cpuWins: state.cpuWins + action.payload.cpuWins
};