Шаблон Typescript React-Redux выглядит странно, не могу сказать, используется ли по назначению ==> Может ли кто-нибудь помочь мне с моими селекторами и реквизитами?

Question

Я новичок в машинописном тексте и недавно попытался реализовать его в своем проекте React. Я думаю, что начинаю понимать это, но что-то кажется действительно подозрительным, и я не могу сказать, было ли это намеренно или я где-то облажался. По сути, у меня есть «currentUser», который может быть либо нулевым (не вошел в систему), либо иметь некоторые реквизиты.

Пользовательский интерфейс:

//user.types.ts

// Define the shape of User object
export interface User {
  a: object;
  c: 'n' | 't';
  d: Diet;
  e: string;
  h: 'r' | 'a';
  m: 's' | 'p';
  n: string;
  s: ScheduledEntries;
  w: WaterSettings;
  id: any;
}

действие setCurrentUser:

export const setCurrentUser = (user: User): UserActionTypes => {
  return {
    type: SET_CURRENT_USER,
    payload: user,
  };
};

Как я понимаю, поскольку пользователь может иметь значение null, мне нужно реализовать переключатель в моем селекторе, чтобы обработать возможность возврата null:

UserSelector:

const selectUser = (state: RootState) => state.user;

export const selectCurrentUser = createSelector([selectUser], (user) => {
  switch (user.currentUser) {
    case null:
      return null;
    default:
      return user.currentUser;
  }
});

Итак, теперь в моем компоненте я пытаюсь получить доступ к диете пользователя со следующим интерфейсом:

Diet Interface

// Define the shape of the user's diet settings object
export interface Diet {
  c: null | number;
  d: null | number;
  e: number;
  f: number;
  k: null | number;
  p: number;
}

Теперь мой файл компонентов:

import React from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import {
  selectDietSettings,
  selectCarbSettings,
} from '../../../redux/user/user.selectors';
import { FaChartPie } from 'react-icons/fa';
import './current-diet.styles.scss';
import { Diet } from '../../../redux/user/user.types';
import { RootState } from '../../../redux/root-reducer';

type Props = PropsFromRedux;

const CurrentDiet = (props: Props) => {
  let fats;
  let protein;
  let carbs;
  let calories;

  if props.diet !== null) {
   fats = props.diet.f;
   protein = props.diet.p;
   calories = props.diet.e;
   carbs = props.diet.c;
  }

  


  return (
    <div>
      <div className='set-h-c'>
        <FaChartPie className='set-i current-i' />
        <div className='t'>Current Diet</div>
      </div>

      <div className='current-diet-c'>
        <div className='fats macro-c'>
          {fats}g<div className='l'>fats</div>
        </div>
        <div className='carbs macro-c'>
          {carbs}g<div className='l'>carbs</div>
        </div>
        <div className='protein macro-c'>
          {protein}g<div className='l'>protein</div>
        </div>
        <div className='macro-c'>
          {calories}
          <div className='l'>calories</div>
        </div>
      </div>
    </div>
  );
};

interface Selectors {
  carbSettings: 't' | 'n' | null;
  diet: Diet | null;
}

const mapStateToProps = createStructuredSelector<RootState, Selectors>({
  carbSettings: selectCarbSettings,
  diet: selectDietSettings,
});

const connector = connect(mapStateToProps);

type PropsFromRedux = ConnectedProps<typeof connector>;

export default connector(CurrentDiet);

Моя самая большая проблема заключается в том, что для того, чтобы это работало, мне нужно постоянно указывать "| null "значение в моих селекторах, а затем в самом компоненте я должен разместить блоки if, чтобы обработать возможность того, что currentUser будет" null "с:

if(props.diet !== null) {
  fats = props.diet.f;
  protein = props.diet.p;
  calories = props.diet.e;
  carbs = props.diet.c;
}

Это меня смутило. Я не могу сказать, работает ли это так, как задумано (в конце концов, я указал, что currentUser может быть нулевым), или это просто много ненужного дополнительного кода, который должен указать, что пользователь Diet может иметь значение null, при этом необходимо использовать блоки if (...! == null) {} повсюду в моем коде, во всех моих компонентах, которые ссылаются на пользователя (почти везде !!). Перед внедрением машинописного текста было легко справиться со случаем, когда currentUser может иметь значение null, просто заблокировав доступ ко всем частям моего приложения, кроме экрана входа в систему, если currentUser === null.

Похоже, я сделал что-то не так . Могут ли профессионалы в области машинописного текста дать мне какие-то рекомендации? Я чувствую, что сейчас хожу здесь по кругу. Я был бы безмерно благодарен!