3

I have this code in reducer:

export const getSerieSuccess = (state = INITIAL_STATE, action) => {
   return {
      ...state,
      isLoadding: false,
      serie: action.serie   //action.serie is a object with id, name, genre e status
   }
}

I want to know if i do serie: action.serie, i am passing a value or a reference. I did this like:

export const getSerieSuccess = (state = INITIAL_STATE, action) => {
const serie = {...action.serie};
   return {
      ...state,
      isLoadding: false,
      serie
   }
}

How wai is better working with functional programming?

Serkan Sipahi
  • 691
  • 6
  • 19
Jose Alves
  • 142
  • 1
  • 10
  • 1
    You should do the first option, you are already not mutating the state by spreading ...state, action is just a returned promise of data so you don't have to worry about that. It doesn't do anything to the action either for that matter. – Joelgullander Jan 06 '19 at 21:04
  • 3
    With functional programming, you can comfortably use the simple first solution (that doesn't involve a copy of the object), as you know that you won't mutate the object elsewhere either. – Bergi Jan 06 '19 at 21:16

1 Answers1

1

You can use both variants as long as the payload of the action is not further referenced and will not be mutated/changed.

Good:

store.dispatch(new SomeAction({a: b: {
  c: 1234
}));

Bad (because you pass a reference and change it afterwards):

let value = new SomeAction({a: b: {
  c: 1234
});
store.dispatch(value);
value.a.b.c = 44543; // bad

setTimeout(_ => (value.a.b.c = 5555), 5000); // bad

Note: if you want to make it really save (no reference passing) you could make a copy of the passed value inside of the action.

Serkan Sipahi
  • 691
  • 6
  • 19
  • @Bergi But when doing series: action.serie, I'm attributing the action.serie reference to the serial attribute like const series = action.serie? In the example shown above, I only get one string for it to be updated. and if I were returning to the component that shows the series, a list of series, in which I have the option to edit and delete each one. If I edit it, would not it be changing the action reference that was passed to that component? – Jose Alves Jan 07 '19 at 18:12