mhogeveen/dnd_dice_roller

mhogeveen

🛠️ Under construction

dnd_dice_roller's Issues

Optimize dice reducer

Hello,

I didn't know how to add feedback to your code so I thought issues might be a good place.

dnd_dice_roller/src/reducers/diceReducer.js

Lines 10 to 47 in b99796b

	const initialState = [
	{
	id: 0,
	dieAmount: 1,
	dieType: 4,
	modAmount: 0,
	},
	{
	id: 1,
	dieAmount: 1,
	dieType: 6,
	modAmount: 0,
	},
	{
	id: 2,
	dieAmount: 1,
	dieType: 8,
	modAmount: 0,
	},
	{
	id: 3,
	dieAmount: 1,
	dieType: 10,
	modAmount: 0,
	},
	{
	id: 4,
	dieAmount: 1,
	dieType: 12,
	modAmount: 0,
	},
	{
	id: 5,
	dieAmount: 1,
	dieType: 20,
	modAmount: 0,
	},
	]

Instead of using an array that you have to iterate each time you dispatch an action (O(N) complexity, N being the number of rows)

        // when you want to update the amount of a specific dice type, you iterate over the whole list
         return state.map((die) =>
            die.id === action.id ? { ...die, dieAmount: action.payload } : die
         )

You could use an object, making the update O(1).

const initialState = {
   0: {
      dieAmount: 1,
      dieType: 4,
      modAmount: 0,
   },
   1: {
      dieAmount: 1,
      dieType: 6,
      modAmount: 0,
   },
   2: {
      dieAmount: 1,
      dieType: 8,
      modAmount: 0,
   },
   3: {
      dieAmount: 1,
      dieType: 10,
      modAmount: 0,
   },
   4: {
      dieAmount: 1,
      dieType: 12,
      modAmount: 0,
   },
   5: {
      dieAmount: 1,
      dieType: 20,
      modAmount: 0,
   },
}

// ...

export default (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_DIE_AMOUNT:
      return {
        ...state,
        [action.id]: { ...state[action.id], dieAmount: action.payload },
      };
    case UPDATE_DIE_TYPE:
      return {
        ...state,
        [action.id]: { ...state[action.id], dieType: action.payload },
      };
    case UPDATE_MOD_AMOUNT:
      return {
        ...state,
        [action.id]: { ...state[action.id], modAmount: action.payload },
      };
    case RESET_ROW:
      return { ...state, [action.id]: { ...resetDie } };
    case REMOVE_ROW:
      const { [action.id]: _, ...newState } = state;
      return newState;
    case ADD_ROW:
      return { ...state, [nextId()]: { ...resetDie } };
    default:
      return state;
  }
};

and the iteration in DiceContainer could look like this

            {Object.entries(this.props.dice).map(([id, die]) => (
               <DieRow die={die} id={id} key={id} />
            ))}

I know this is trivial given N, but might be helpful to know this in the future :)