Initializing redux state type checking with Typescript on component level

Issue

I coding React Native application using RTK Query with Typescript for state management, I have main slice which holds 3 depth level company object itself and other things like loading state etc. If user login successfully ,I am fetching the company info from remote and dispatching to the main slice store as currentCompany. So user can not use application without a company. But when i initializing the redux store.Initial state like:

interface MainSlice {
  loading: number;
  isLoggedIn: boolean;
  currentCompany: Company | undefined; 
#If I use only company here I have to give dummy company for initial state which is not good practice.
}


const initialState: MainSlice = {
  loading: 0,
  isLoggedIn: false,
  currentCompany: undefined, #As I mentioned I had to define current company as undefined. If a define a dummy Company here because of company type requires a lot attributes I don't want to do that.
};

When I use the main slice like that I always had to check at component level If company is undefined or not. So this is exhausting. Typescript error ss

Is there any way to escape from Typescript error or proper initial state for this situation.I want to define company as will be certainly existed

Solution

There are several things that help, no silver bullet unfortunately.

1. First of all, please use currentCompany: Company | null; instead of undefined. null is the right choice if something is knowingly, explicitly empty or missing - which is true in your case. You know company data will be saved later, but it is not there at first. See What is the difference between null and undefined in JavaScript?

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator are useful when working with null/undefined and fallback values. Example: currentCompany?.id ?? 'fallback-id-here'

3. You can make a type assertion after reading from the state: (currentCompany as Company).id

4. If there is exactly one logged in user with exactly one company, you could move the company state to its own slice and model the initial state better:

   • interface CompanySlice { id: number, name: string };
   • const companyInitialState: CompanySlice = { id: 0, name: '' }; - Use a value that is of the same data type, but allows you to detect if it's empty or invalid. In this example, id needs to be greater than 0, but you can always access it without typescript warnings in the components. There is nothing wrong with having a "dummy" company as initial state per se. You can write a selector that infers if a company has been saved or not: const hasCompany = state => state.company.id > 0.

Answered By - timotgl