NgRx reducer function with condition

Question

I have a side effect that detects the browser language and dispatches a browserLanguageSupported action if it is a language that my application can handle.

Now I have following reducer function that only updates the states preferredLanguage property in case it is not defined already. This is important because there are other actions that update this state property and I do not want a late browserLanguageSupported action to overwrite such a state update.

export interface State {
  preferredLanguage: AppLanguage | undefined;
  rehydrationComplete: boolean;
}

export const initialState: State = {
  preferredLanguage: undefined,
  rehydrationComplete: false
};

export const reducer = createReducer(
  initialState,
  on(LanguageActions.browserLanguageSupported, (state, {browserLanguage}) => {
    if (!state.preferredLanguage) {
      return {...state, preferredLanguage: browserLanguage};
    }
    return state;
  })
);

Now for my question: Is it good practice to have such a condition in a reducer operator? The function itself is still pure. But I am not sure if it is good design or if I should solve it differently, lets say by adding state slice selection in the side effect that dispatches this action.

Btw. the reason I am not setting it directly in the initial state is because I get the browser language from an angular service and I am not sure if it is even possible to set initial feature state from service injection?

Best regards, Pascal

Answer 1

I would to this the same way, so you get a 👍 from me. Adding a slice of the state into the effect just adds needless complexity. The reducer contains the state, and it's OK to add logic to see if state needs to be updated or not.

Also, let's say you need to add this logic into another action/effect. Having it in the reducer makes it easier to reuse if it's needed. Otherwise you end up with duplicate logic.