Phá Kén

3 min
2 năm ago
5

Chào các bạn, chắc mọi người cũng đã quá quen với console.log. Bạn có thường sử dụng nó console.log trong quá trình phát triển dự án của mình không? Và mặc dù chúng ta sẽ tiếp tục sử dụng console.log, vẫn có những giải […]

Tagged #javascript, #ReactNative

Chào các bạn, chắc mọi người cũng đã quá quen với console.log. Bạn có thường sử dụng nó console.log trong quá trình phát triển dự án của mình không?

Và mặc dù chúng ta sẽ tiếp tục sử dụng console.log, vẫn có những giải pháp thay thế khác giúp quá trình phát triển của bạn thú vị và hiệu quả hơn.

LƯU Ý: Nếu bạn đang xem nhật ký trong terminal, đặc biệt nếu bạn là nhà phát triển backend, thì bạn có thể thử JSON.stringify(your_data, null, 2)và sử dụng console.log()kết quả. Điều này sẽ đảm bảo rằng bạn không vào được {... value: [Object, Object]}nhật ký và nhật ký cũng sẽ được định dạng để dễ đọc hơn.

console.dir()

Để liệt kê theo thứ bậc các mảng và đối tượng.

console.dir(["apples", "oranges", "bananas"]);

console. table()

Đối với danh sách các hàng và cột của mảng (có thể không phù hợp với các đối tượng).

console.table(["apples", "oranges", "bananas"]);

console.table({"a": 1, "b": 2, "c": 3});

console. group()

console.log('This is the top outer level'); console.group('Task 1'); console.log('Task activity 1'); console.log('Task activity 2'); console.groupEnd(); console.group('Task 2'); console.log('Task activity 3'); console.log('Task activity 4'); console.groupEnd(); console.log('Back to the top outer level');

console.time() và console.timeEnd()

try { console.time("record-1"); await someAsyncTask(); } catch (error) { // handle error } finally { console.timeEnd("record-1"); }

console. delete()

Thao tác này sẽ xóa bảng điều khiển. Hãy thử nó 1 lần đi mọi người. đảm bảo rất tiện lợi và hay ho đó nhen!

100 TypeScript interview questions

Tài Liệu - Khóa Học Free

64 min
2 năm ago
14

Fundamentals JavaScript equivalent: React Native Example with TypeScript: Classes & Objects 11. Explain classes in TypeScript. How are they different from ES6 classes? TypeScript classes extend the functionality of ES6 classes by adding features such as type annotations, access modifiers, and abstract […]

Tagged #interview, #ReactNative

What is TypeScript and how does it differ from JavaScript? TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds static types to the language, which helps catch errors early through type checking. Example:

 // TypeScript code let message: string = "Hello, TypeScript!";

JavaScript equivalent:

 // JavaScript code let message = "Hello, TypeScript!";

Can you explain what is meant by “TypeScript is a superset of JavaScript”? TypeScript is a superset of JavaScript, meaning it includes all JavaScript features plus additional features such as static typing, interfaces, and advanced tooling support. Every valid JavaScript code is also valid TypeScript code.
What are the basic types available in TypeScript?

boolean
number
string
array
tuple
enum
any
void
null and undefined
object Example:

 let isActive: boolean = true; let age: number = 25; let username: string = "JohnDoe"; let numbers: number[] = [1, 2, 3]; let tuple: [string, number] = ["Hello", 10];

How do you declare variables in TypeScript? Variables in TypeScript are declared using let, const, or var, followed by a type annotation. Example:

 let name: string = "Alice"; const age: number = 30; var isStudent: boolean = false;

What are Interfaces in TypeScript and how do they work? Interfaces in TypeScript define the structure of an object. They are used for type-checking and ensuring that objects adhere to a specific structure. Example:

 interface User { name: string; age: number; } const user: User = { name: "John", age: 25 };

Describe the Enum type and when you might use it. Enums are a way to define named constants. They are useful when you need a set of distinct values. Example:

 enum Direction { Up, Down, Left, Right } let move: Direction = Direction.Up;

How do you define and use a function in TypeScript? Functions in TypeScript can have typed parameters and return types. Example:

 function greet(name: string): string { return `Hello, ${name}`; } let greeting: string = greet("Alice");

What does “type inference” mean in the context of TypeScript? Type inference refers to TypeScript’s ability to automatically infer the type of a variable based on its value. Example:

 let score = 100; // TypeScript infers the type as number

Explain the use of ‘let’ and ‘const’ in TypeScript.

let is used to declare variables that can be reassigned.
const is used to declare variables that cannot be reassigned. Example:

 let count: number = 10; count = 20; // allowed const PI: number = 3.14; // PI = 3.14159; // Error: Cannot assign to 'PI' because it is a constant.

How do you compile TypeScript files into JavaScript? TypeScript files (.ts) are compiled into JavaScript using the TypeScript compiler (tsc). Example: tsc app.ts

React Native Example with TypeScript:

import React from 'react'; import { Text, View } from 'react-native'; interface Props { name: string; age: number; } const Welcome: React.FC<Props> = ({ name, age }) => { return ( <View> <Text>Hello, {name}!</Text> <Text>You are {age} years old.</Text> </View> ); }; export default Welcome;

Classes & Objects

11. Explain classes in TypeScript. How are they different from ES6 classes?

TypeScript classes extend the functionality of ES6 classes by adding features such as type annotations, access modifiers, and abstract classes. This provides better tooling, type safety, and more expressive code.

Example:

class Person { private name: string; constructor(name: string) { this.name = name; } greet(): string { return `Hello, my name is ${this.name}`; } } // React Native component using TypeScript class import React from 'react'; import { Text, View } from 'react-native'; class Welcome extends React.Component { private name: string; constructor(props: any) { super(props); this.name = "Alice"; } render() { return ( <View> <Text>{this.greet()}</Text> </View> ); } greet() { return `Hello, my name is ${this.name}`; } } export default Welcome;

12. How do you implement Inheritance in TypeScript?

Inheritance in TypeScript is implemented using the extends keyword, similar to ES6. This allows a class to inherit properties and methods from another class.

Example:

class Animal { name: string; constructor(name: string) { this.name = name; } move(distance: number): void { console.log(`${this.name} moved ${distance} meters.`); } } class Dog extends Animal { bark(): void { console.log('Woof! Woof!'); } } const dog = new Dog('Rex'); dog.bark(); dog.move(10); // React Native component using inherited class import React from 'react'; import { Text, View } from 'react-native'; class Pet extends Dog { render() { return ( <View> <Text>{this.name} says Woof! Woof!</Text> </View> ); } } export default Pet;

13. What are access modifiers and how do they work in TypeScript?

Access modifiers in TypeScript control the visibility of class members. The available modifiers are:

public: Accessible from anywhere (default).
private: Accessible only within the class.
protected: Accessible within the class and its subclasses.

Example:

class Car { private model: string; protected year: number; public brand: string; constructor(model: string, year: number, brand: string) { this.model = model; this.year = year; this.brand = brand; } public getDetails(): string { return `${this.brand} ${this.model}, ${this.year}`; } } // React Native component demonstrating access modifiers import React from 'react'; import { Text, View } from 'react-native'; class Vehicle extends Car { render() { return ( <View> <Text>{this.getDetails()}</Text> </View> ); } } export default Vehicle;

14. Discuss Abstract classes and their purposes in TypeScript.

Abstract classes in TypeScript cannot be instantiated directly. They are meant to be extended by other classes. Abstract classes can contain abstract methods, which must be implemented by the subclasses.

Example:

abstract class Shape { abstract getArea(): number; printArea(): void { console.log(`Area: ${this.getArea()}`); } } class Circle extends Shape { radius: number; constructor(radius: number) { super(); this.radius = radius; } getArea(): number { return Math.PI * this.radius * this.radius; } } const circle = new Circle(5); circle.printArea(); // Area: 78.53981633974483 // React Native component using abstract class import React from 'react'; import { Text, View } from 'react-native'; class Geometry extends Circle { render() { return ( <View> <Text>Circle Area: {this.getArea()}</Text> </View> ); } } export default Geometry;

15. Can you describe the use of Constructors within TypeScript classes?

Constructors in TypeScript are special methods used to initialize objects. They can include parameter type annotations to ensure correct usage.

Example:

class Point { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; } display(): void { console.log(`Point(${this.x}, ${this.y})`); } } const point = new Point(10, 20); point.display(); // Point(10, 20) // React Native component using a class with constructor import React from 'react'; import { Text, View } from 'react-native'; class Coordinate extends Point { render() { return ( <View> <Text>{`Point(${this.x}, ${this.y})`}</Text> </View> ); } } export default Coordinate;

16. What are Property Decorators and how do you use them?

Property decorators are functions that modify the behavior of class properties. They are used to add metadata or alter property behavior.

Example:

function ReadOnly(target: any, key: string) { Object.defineProperty(target, key, { writable: false }); } class Book { @ReadOnly title: string; constructor(title: string) { this.title = title; } } const book = new Book('TypeScript in Action'); // book.title = 'New Title'; // Error: Cannot assign to read only property 'title'

17. How do getters and setters work in TypeScript?

Getters and setters provide a way to control access to a class property. They allow executing logic when getting or setting a property value.

Example:

class Employee { private _fullName: string; get fullName(): string { return this._fullName; } set fullName(newName: string) { this._fullName = newName; } } const employee = new Employee(); employee.fullName = "John Doe"; console.log(employee.fullName); // John Doe // React Native component using getters and setters import React from 'react'; import { Text, View } from 'react-native'; class Staff extends Employee { render() { return ( <View> <Text>{`Employee: ${this.fullName}`}</Text> </View> ); } } export default Staff;

18. Explain Method Overloading in TypeScript.

Method overloading in TypeScript allows a class to have multiple methods with the same name but different parameter types or numbers. The actual implementation will check the arguments and execute the appropriate logic.

Example:

class Calculator { add(a: number, b: number): number; add(a: string, b: string): string; add(a: any, b: any): any { if (typeof a === 'number' && typeof b === 'number') { return a + b; } if (typeof a === 'string' && typeof b === 'string') { return a + b; } throw new Error('Invalid arguments'); } } const calc = new Calculator(); console.log(calc.add(1, 2)); // 3 console.log(calc.add('Hello, ', 'World!')); // Hello, World! // React Native component using method overloading import React from 'react'; import { Text, View } from 'react-native'; class Math extends Calculator { render() { return ( <View> <Text>Sum: {this.add(1, 2)}</Text> <Text>Greeting: {this.add('Hello, ', 'World!')}</Text> </View> ); } } export default Math;

19. What is the purpose of the ‘static’ keyword in TypeScript Class?

The static keyword defines a class member that belongs to the class itself rather than to instances of the class. Static members are accessed using the class name.

Example:

class MathUtil { static PI: number = 3.14; static circleArea(radius: number): number { return MathUtil.PI * radius * radius; } } console.log(MathUtil.PI); // 3.14 console.log(MathUtil.circleArea(5)); // 78.5 // React Native component using static members import React from 'react'; import { Text, View } from 'react-native'; class GeometryUtil extends MathUtil { render() { return ( <View> <Text>PI: {MathUtil.PI}</Text> <Text>Circle Area: {MathUtil.circleArea(5)}</Text> </View> ); } } export default GeometryUtil;

Types & Assertions

20. How do you define custom types with Type Aliases?

Type aliases in TypeScript allow you to create a new name for an existing type, making your code more readable and manageable.

Example:

type UserID = string; type User = { id: UserID; name: string; age: number; }; const user: User = { id: "123", name: "Alice", age: 30 }; // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type GreetingProps = { user: User; }; const Greeting: React.FC<GreetingProps> = ({ user }) => ( <View> <Text>Hello, {user.name}!</Text> </View> ); export default Greeting;

21. Can you explain Union types and provide an example?

Union types allow a variable to hold multiple types. It is defined using the | operator.

Example:

let value: number | string; value = 42; // valid value = "Hello"; // valid function printValue(value: number | string) { if (typeof value === "number") { console.log(`Number: ${value}`); } else { console.log(`String: ${value}`); } } printValue(123); // Number: 123 printValue("Hello"); // String: Hello // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type ValueProps = { value: number | string; }; const DisplayValue: React.FC<ValueProps> = ({ value }) => ( <View> <Text>{typeof value === 'number' ? `Number: ${value}` : `String: ${value}`}</Text> </View> ); export default DisplayValue;

22. How do Intersection types work in TypeScript?

Intersection types combine multiple types into one. It is defined using the & operator.

Example:

type Person = { name: string; age: number; }; type Employee = { employeeId: number; }; type EmployeeDetails = Person & Employee; const employee: EmployeeDetails = { name: "John", age: 35, employeeId: 101 }; // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type EmployeeProps = { details: EmployeeDetails; }; const EmployeeInfo: React.FC<EmployeeProps> = ({ details }) => ( <View> <Text>{`Name: ${details.name}, Age: ${details.age}, Employee ID: ${details.employeeId}`}</Text> </View> ); export default EmployeeInfo;

23. What are Tuple types and when should they be used?

Tuples are a way to define arrays with fixed types and a fixed number of elements.

Example:

let tuple: [string, number]; tuple = ["hello", 10]; // valid // tuple = [10, "hello"]; // Error: Type 'number' is not assignable to type 'string'. // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type TupleComponentProps = { data: [string, number]; }; const TupleComponent: React.FC<TupleComponentProps> = ({ data }) => ( <View> <Text>{`String: ${data[0]}, Number: ${data[1]}`}</Text> </View> ); export default TupleComponent;

24. Explain Type Assertions and why they are useful.

Type assertions allow you to tell the compiler to treat an entity as a different type. They are useful when you have more information about the type than the compiler does.

Example:

let someValue: any = "this is a string"; let strLength: number = (someValue as string).length; // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type AssertionComponentProps = { value: any; }; const AssertionComponent: React.FC<AssertionComponentProps> = ({ value }) => { const strValue = value as string; return ( <View> <Text>{`String Length: ${strValue.length}`}</Text> </View> ); }; export default AssertionComponent;

25. How do you use the `typeof` type guard in TypeScript?

The typeof type guard is used to narrow down the type of a variable within a conditional block.

Example:

function padLeft(value: string | number, padding: string | number) { if (typeof padding === "number") { return Array(padding + 1).join(" ") + value; } if (typeof padding === "string") { return padding + value; } throw new Error(`Expected string or number, got '${typeof padding}'.`); } // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type PadLeftComponentProps = { value: string | number; padding: string | number; }; const PadLeftComponent: React.FC<PadLeftComponentProps> = ({ value, padding }) => { const paddedValue = typeof padding === "number" ? Array(padding + 1).join(" ") + value : padding + value; return ( <View> <Text>{`Padded Value: ${paddedValue}`}</Text> </View> ); }; export default PadLeftComponent;

26. Can you create types from existing data using Type Inference?

Type inference in TypeScript allows the compiler to automatically infer the types of variables and expressions based on their values.

Example:

let inferredString = "This is a string"; // inferred as string let inferredNumber = 42; // inferred as number // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; const TypeInferenceComponent: React.FC = () => { const message = "TypeScript is great!"; // inferred as string const count = 100; // inferred as number return ( <View> <Text>{`Message: ${message}`}</Text> <Text>{`Count: ${count}`}</Text> </View> ); }; export default TypeInferenceComponent;

TypeScript Generics

27. What are Generics in TypeScript and why are they used?

Generics in TypeScript allow you to create components that can work with a variety of types rather than a single one. This makes your code more flexible and reusable. Generics enable you to define functions, classes, and interfaces that can operate with any data type while maintaining type safety.

Example:

function identity<T>(arg: T): T { return arg; } let output1 = identity<string>("myString"); // type of output1 is string let output2 = identity<number>(100); // type of output2 is number // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type GenericComponentProps<T> = { item: T; }; const GenericComponent = <T,>({ item }: GenericComponentProps<T>) => ( <View> <Text>{`Item: ${item}`}</Text> </View> ); export default function App() { return ( <View> <GenericComponent item="Hello, World!" /> <GenericComponent item={123} /> </View> ); }

28. How do you create a generic function?

A generic function is defined by adding a type variable inside angle brackets (<>) before the function’s parameter list.

Example:

function echo<T>(arg: T): T { return arg; } let result1 = echo<string>("Hello!"); // type of result1 is string let result2 = echo<number>(10); // type of result2 is number // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type EchoComponentProps<T> = { value: T; }; const EchoComponent = <T,>({ value }: EchoComponentProps<T>) => ( <View> <Text>{`Value: ${value}`}</Text> </View> ); export default function App() { return ( <View> <EchoComponent value="Generics are cool!" /> <EchoComponent value={42} /> </View> ); }

29. Discuss how Generic Interfaces can be defined.

Generic interfaces are interfaces that take one or more type parameters. They can be used to define the shape of objects that are generic.

Example:

interface Box<T> { contents: T; } let stringBox: Box<string> = { contents: "Hello" }; let numberBox: Box<number> = { contents: 42 }; // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type BoxProps<T> = { box: Box<T>; }; const BoxComponent = <T,>({ box }: BoxProps<T>) => ( <View> <Text>{`Contents: ${box.contents}`}</Text> </View> ); export default function App() { return ( <View> <BoxComponent box={{ contents: "Generic Interfaces" }} /> <BoxComponent box={{ contents: 100 }} /> </View> ); }

30. Explain how Generics work with Classes.

Generics can be used with classes to create classes that can work with any type. This is useful for creating data structures like stacks, queues, or trees that can store any type of data.

Example:

class GenericNumber<T> { zeroValue: T; add: (x: T, y: T) => T; constructor(zeroValue: T, add: (x: T, y: T) => T) { this.zeroValue = zeroValue; this.add = add; } } let myGenericNumber = new GenericNumber<number>(0, (x, y) => x + y); console.log(myGenericNumber.add(5, 10)); // 15 // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; class Container<T> { value: T; constructor(value: T) { this.value = value; } getValue(): T { return this.value; } } const GenericClassComponent = <T,>({ container }: { container: Container<T> }) => ( <View> <Text>{`Value: ${container.getValue()}`}</Text> </View> ); export default function App() { const stringContainer = new Container<string>("Generics with Classes"); const numberContainer = new Container<number>(2024); return ( <View> <GenericClassComponent container={stringContainer} /> <GenericClassComponent container={numberContainer} /> </View> ); }

31. Can you provide an example of a generic constraint?

Generic constraints allow you to specify that a generic type parameter must extend a certain type. This ensures that the generic type has the required properties or methods.

Example:

interface Lengthwise { length: number; } function logLength<T extends Lengthwise>(arg: T): T { console.log(arg.length); return arg; } logLength("Hello"); // Works because string has a length property // logLength(10); // Error: Argument of type 'number' is not assignable to parameter of type 'Lengthwise'. // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type LengthwiseComponentProps<T extends Lengthwise> = { item: T; }; const LengthwiseComponent = <T extends Lengthwise>({ item }: LengthwiseComponentProps<T>) => ( <View> <Text>{`Length: ${item.length}`}</Text> </View> ); export default function App() { return ( <View> <LengthwiseComponent item="Hello, Generics!" /> <LengthwiseComponent item={[1, 2, 3]} /> </View> ); }

Advanced Types & Techniques

32. What is a Discriminated Union in TypeScript?

A discriminated union is a design pattern used in TypeScript that combines the concepts of union types and literal types. It helps TypeScript to narrow down types and enables type-safe access to properties. Discriminated unions typically involve:

A union of types.
A common property (the discriminator) that has a literal type.

Example:

interface Square { kind: "square"; size: number; } interface Rectangle { kind: "rectangle"; width: number; height: number; } interface Circle { kind: "circle"; radius: number; } type Shape = Square | Rectangle | Circle; function area(shape: Shape): number { switch (shape.kind) { case "square": return shape.size * shape.size; case "rectangle": return shape.width * shape.height; case "circle": return Math.PI * shape.radius * shape.radius; } } // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type ShapeProps = { shape: Shape; }; const ShapeComponent: React.FC<ShapeProps> = ({ shape }) => { const shapeArea = area(shape); return ( <View> <Text>{`Shape Area: ${shapeArea}`}</Text> </View> ); }; export default ShapeComponent;

33. How do you declare a Readonly type?

The Readonly type in TypeScript is a utility type that makes all properties of an object type readonly, meaning they cannot be reassigned.

Example:

interface User { id: number; name: string; } const user: Readonly<User> = { id: 1, name: "Alice" }; // user.id = 2; // Error: Cannot assign to 'id' because it is a read-only property. // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type ReadonlyProps = { user: Readonly<User>; }; const ReadonlyComponent: React.FC<ReadonlyProps> = ({ user }) => ( <View> <Text>{`User ID: ${user.id}, User Name: ${user.name}`}</Text> </View> ); export default ReadonlyComponent;

34. Can you describe the use of Mapped types?

Mapped types in TypeScript allow you to create new types by transforming properties of an existing type. You can use them to create types like Partial, Readonly, or other custom transformations.

Example:

type User = { id: number; name: string; email: string; }; type PartialUser = { [P in keyof User]?: User[P]; }; // Equivalent to: interface PartialUserManual { id?: number; name?: string; email?: string; } // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type MappedProps = { user: PartialUser; }; const MappedComponent: React.FC<MappedProps> = ({ user }) => ( <View> <Text>{`User ID: ${user.id}, User Name: ${user.name}, User Email: ${user.email}`}</Text> </View> ); export default MappedComponent;

35. Explain Conditional types in TypeScript.

Conditional types allow you to create types that depend on a condition. They follow the syntax T extends U ? X : Y.

Example:

type Message<T> = T extends string ? string : number; let message1: Message<string>; // type is string let message2: Message<number>; // type is number // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type ConditionalProps<T> = { value: T; }; const ConditionalComponent = <T,>({ value }: ConditionalProps<T>) => ( <View> <Text>{`Value: ${value}`}</Text> </View> ); export default function App() { return ( <View> <ConditionalComponent value="Hello, Conditional Types!" /> <ConditionalComponent value={123} /> </View> ); }

36. What are Index types and how do you use the `keyof` keyword?

Index types allow you to define types that use the keys of another type. The keyof keyword creates a union of the keys of a given type.

Example:

type User = { id: number; name: string; email: string; }; type UserKeys = keyof User; // 'id' | 'name' | 'email' function getValue<T, K extends keyof T>(obj: T, key: K): T[K] { return obj[key]; } const user: User = { id: 1, name: "Alice", email: "alice@example.com" }; const userId = getValue(user, "id"); // 1 // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type IndexProps<T> = { obj: T; key: keyof T; }; const IndexComponent = <T,>({ obj, key }: IndexProps<T>) => ( <View> <Text>{`Value: ${obj[key]}`}</Text> </View> ); export default function App() { return ( <View> <IndexComponent obj={user} key="name" /> <IndexComponent obj={user} key="email" /> </View> ); }

37. How does Type Casting differ from Type Assertions?

Type casting is a way to explicitly tell the compiler to treat a value as a different type. In TypeScript, type assertions serve the same purpose and are done using the as keyword or angle bracket syntax.

Example:

let someValue: any = "this is a string"; let strLength: number = (someValue as string).length; // or let strLength2: number = (<string>someValue).length; // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type TypeCastProps = { value: any; }; const TypeCastComponent: React.FC<TypeCastProps> = ({ value }) => { const strValue = value as string; return ( <View> <Text>{`String Length: ${strValue.length}`}</Text> </View> ); }; export default TypeCastComponent;

38. Discuss the Partial, Required, Readonly, and Pick utility types.

Partial: Makes all properties of a type optional.
Required: Makes all properties of a type required.
Readonly: Makes all properties of a type readonly.
Pick: Creates a type by picking a set of properties from another type.

Example:

interface User { id: number; name: string; email?: string; } type PartialUser = Partial<User>; type RequiredUser = Required<User>; type ReadonlyUser = Readonly<User>; type PickedUser = Pick<User, "id" | "name">; // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type UtilityProps = { user: PartialUser; readonlyUser: ReadonlyUser; }; const UtilityComponent: React.FC<UtilityProps> = ({ user, readonlyUser }) => ( <View> <Text>{`Partial User: ${user.name}`}</Text> <Text>{`Readonly User: ${readonlyUser.name}`}</Text> </View> ); export default function App() { return ( <View> <UtilityComponent user={{ id: 1, name: "Alice" }} readonlyUser={{ id: 2, name: "Bob", email: "bob@example.com" }} /> </View> ); }

39. What is the `never` type and when would it be used?

The never type represents values that never occur. It is used for functions that never return or for variables that cannot hold any value.

Example:

function error(message: string): never { throw new Error(message); } function infiniteLoop(): never { while (true) {} } // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; type NeverComponentProps = { shouldThrow: boolean; }; const NeverComponent: React.FC<NeverComponentProps> = ({ shouldThrow }) => { if (shouldThrow) { error("This is an error message"); } return ( <View> <Text>This component never reaches here if shouldThrow is true.</Text> </View> ); }; export default NeverComponent;

Modules & Namespaces

40. How do you organize code with Modules in TypeScript?

Modules in TypeScript allow you to organize code into self-contained units. Each module can export classes, interfaces, functions, or variables to be used in other modules. Modules help in managing code dependencies and improving code maintainability.

Example:

// mathUtils.ts export function add(a: number, b: number): number { return a + b; } export function subtract(a: number, b: number): number { return a - b; } // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; import { add, subtract } from './mathUtils'; const MathComponent: React.FC = () => ( <View> <Text>{`Add: ${add(10, 5)}`}</Text> <Text>{`Subtract: ${subtract(10, 5)}`}</Text> </View> ); export default MathComponent;

41. When would you use Namespaces?

Namespaces in TypeScript are used to organize code into logical groups and prevent naming collisions. They are useful in applications where you want to encapsulate multiple related pieces of functionality without creating separate modules.

Example:

namespace Geometry { export interface Shape { area(): number; } export class Circle implements Shape { constructor(public radius: number) {} area(): number { return Math.PI * this.radius * this.radius; } } export class Square implements Shape { constructor(public size: number) {} area(): number { return this.size * this.size; } } } // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; const GeometryComponent: React.FC = () => { const circle = new Geometry.Circle(5); const square = new Geometry.Square(4); return ( <View> <Text>{`Circle Area: ${circle.area()}`}</Text> <Text>{`Square Area: ${square.area()}`}</Text> </View> ); }; export default GeometryComponent;

42. What is the difference between Internal and External modules?

Internal Modules (deprecated term for namespaces) are used to organize code within a single file or across multiple files but without using the module system. They are useful for organizing code within a single global namespace.
External Modules are files that import and export functionality using the module system. They use import and export statements and are suitable for larger codebases where you need to manage dependencies between different parts of your application.

43. How do you export and import modules?

Modules are exported using the export keyword and imported using the import keyword.

Example:

// mathUtils.ts export function multiply(a: number, b: number): number { return a * b; } // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; import { multiply } from './mathUtils'; const MultiplyComponent: React.FC = () => ( <View> <Text>{`Multiply: ${multiply(10, 5)}`}</Text> </View> ); export default MultiplyComponent;

44. Can you describe module resolution and its strategies?

Module resolution is the process by which TypeScript determines the location of modules to import. The two primary strategies are:

Classic: Used in older codebases where modules are not organized using the Node.js module system.
Node: Mimics the Node.js module resolution strategy, looking for modules in node_modules directories and handling package names and paths.

45. Discuss the compatibility of TypeScript modules with ES6 modules.

TypeScript modules are fully compatible with ES6 modules. TypeScript’s import and export statements directly correspond to ES6 module syntax. This compatibility ensures that TypeScript can be seamlessly integrated into projects that use ES6 modules.

Example:

// es6Module.js export const greet = (name) => `Hello, ${name}!`; // TypeScript File import { greet } from './es6Module'; console.log(greet('Alice')); // Hello, Alice! // React Native Example: import React from 'react'; import { Text, View } from 'react-native'; import { greet } from './es6Module'; const GreetComponent: React.FC = () => ( <View> <Text>{greet('Bob')}</Text> </View> ); export default GreetComponent;

Decorators & Metadata

46. What are Decorators and how do you use them?

Decorators in TypeScript are a special kind of declaration that can be attached to a class, method, accessor, property, or parameter. Decorators are used to add metadata or modify the behavior of the decorated element.

Example:

function Logger(constructor: Function) { console.log('Logging...'); console.log(constructor); } @Logger class Person { name = 'John'; constructor() { console.log('Creating person object...'); } } const person = new Person();

47. Can you define Class Decorators and how they can alter Class behavior?

Class decorators are functions that take a class constructor as an argument. They can add properties, methods, or even replace the constructor to alter the class behavior.

Example:

function Injectable(constructor: Function) { constructor.prototype.injected = true; } @Injectable class Service { constructor() {} } const service = new Service(); console.log((service as any).injected); // true

48. How do you use Method Decorators in TypeScript?

Method decorators are applied to the methods of a class. They receive the target, the method name, and the property descriptor as arguments and can modify the method behavior or add metadata.

Example:

function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) { const originalMethod = descriptor.value; descriptor.value = function (...args: any[]) { console.log(`Method ${propertyKey} called with args: ${JSON.stringify(args)}`); return originalMethod.apply(this, args); }; return descriptor; } class Calculator { @Log add(a: number, b: number): number { return a + b; } } const calculator = new Calculator(); console.log(calculator.add(2, 3)); // Logs: Method add called with args: [2,3] and returns 5

49. What are Accessor Decorators?

Accessor decorators are applied to getters and setters of a class. They receive the target, the name of the accessor, and the property descriptor. They can be used to modify or log access to properties.

Example:

function LogAccessor(target: any, propertyKey: string, descriptor: PropertyDescriptor) { const originalGet = descriptor.get; descriptor.get = function () { console.log(`Get ${propertyKey}`); return originalGet?.apply(this); }; return descriptor; } class Person { private _name: string = 'John'; @LogAccessor get name(): string { return this._name; } set name(value: string) { this._name = value; } } const person = new Person(); console.log(person.name); // Logs: Get name and returns 'John'

50. Explain how to use Property Decorators.

Property decorators are applied to class properties. They receive the target and the property key. They can be used to add metadata or modify property behavior.

Example:

function Readonly(target: any, propertyKey: string) { Object.defineProperty(target, propertyKey, { writable: false, }); } class User { @Readonly name: string = 'John'; } const user = new User(); // user.name = 'Alice'; // Error: Cannot assign to 'name' because it is a read-only property.

51. How do Decorators compose in TypeScript?

Decorators in TypeScript are applied in a bottom-up fashion, meaning that when multiple decorators are applied to a single declaration, the decorators are evaluated in reverse order of their appearance.

Example:

function First() { console.log('First(): factory evaluated'); return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) { console.log('First(): called'); }; } function Second() { console.log('Second(): factory evaluated'); return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) { console.log('Second(): called'); }; } class Example { @First() @Second() method() {} } const example = new Example(); example.method(); // Logs: // First(): factory evaluated // Second(): factory evaluated // Second(): called // First(): called

52. Discuss Reflection and how it works with Decorators.

Reflection in TypeScript involves the ability to inspect metadata about types at runtime. TypeScript’s experimental metadata reflection API allows decorators to attach metadata to class members. The reflect-metadata library is commonly used for this purpose.

Example:

import 'reflect-metadata'; function ReflectiveMetadata(target: any, propertyKey: string) { Reflect.defineMetadata('custom:annotation', 'metadataValue', target, propertyKey); } class Demo { @ReflectiveMetadata method() {} } const demo = new Demo(); const metadataValue = Reflect.getMetadata('custom:annotation', demo, 'method'); console.log(metadataValue); // metadataValue

React Native Example with Decorators:

import React from 'react'; import { Text, View } from 'react-native'; import 'reflect-metadata'; function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) { const originalMethod = descriptor.value; descriptor.value = function (...args: any[]) { console.log(`Method ${propertyKey} called with args: ${JSON.stringify(args)}`); return originalMethod.apply(this, args); }; return descriptor; } class MathService { @Log add(a: number, b: number): number { return a + b; } } const mathService = new MathService(); const DecoratorComponent: React.FC = () => ( <View> <Text>{`Addition Result: ${mathService.add(5, 3)}`}</Text> </View> ); export default DecoratorComponent;

Configuration & Compilation

53. Explain the purpose of `tsconfig.json`.

tsconfig.json is a configuration file for TypeScript projects that specifies the root files and the compiler options required to compile the project. It allows you to define settings such as the target JavaScript version, module system, file inclusions, and exclusions.

Example:

{ "compilerOptions": { "target": "es6", "module": "commonjs", "strict": true, "esModuleInterop": true }, "include": ["src"], "exclude": ["node_modules", "**/*.spec.ts"] }

54. How do you include and exclude files in compilation using `tsconfig.json`?

In tsconfig.json, you can use the include and exclude properties to specify which files should be included or excluded from the TypeScript compilation process.

Example:

{ "include": ["src/**/*"], "exclude": ["node_modules", "dist"] }

This configuration includes all files in the src directory and excludes files in the node_modules and dist directories.

55. What are some common compiler options in TypeScript?

Some common compiler options in TypeScript include:

target: Specifies the ECMAScript target version (e.g., es5, es6).
module: Defines the module system (e.g., commonjs, esnext).
strict: Enables all strict type-checking options.
outDir: Specifies the output directory for compiled files.
rootDir: Specifies the root directory of input files.
sourceMap: Generates source map files for debugging.

Example:

{ "compilerOptions": { "target": "es6", "module": "commonjs", "outDir": "./dist", "rootDir": "./src", "strict": true, "sourceMap": true } }

56. How does TypeScript support source maps?

TypeScript supports source maps through the sourceMap compiler option. When enabled, the TypeScript compiler generates a .map file for each .js file, allowing you to map the compiled JavaScript code back to the original TypeScript source code. This is useful for debugging.

Example:

{ "compilerOptions": { "sourceMap": true } }

57. Discuss incremental build support in TypeScript.

Incremental build support in TypeScript allows the compiler to reuse information from previous compilations to improve compilation speed. This is particularly useful in large projects. The incremental option creates a .tsbuildinfo file, which stores information about the project’s state.

Example:

{ "compilerOptions": { "incremental": true } }

58. Explain how the `noImplicitAny` compiler option works.

The noImplicitAny compiler option, when enabled, raises an error whenever the compiler cannot infer a variable’s type and implicitly assigns it the any type. This helps catch potential errors by ensuring that all types are explicitly defined.

Example:

{ "compilerOptions": { "noImplicitAny": true } }

Without noImplicitAny:

function greet(name) { console.log(`Hello, ${name}`); } greet("Alice"); // No error, but `name` has an implicit `any` type.

With noImplicitAny:

function greet(name: string) { console.log(`Hello, ${name}`); } greet("Alice"); // Error if `name` type is not defined.

59. How do you enable strict null checks in TypeScript?

Strict null checks can be enabled using the strictNullChecks compiler option. When enabled, null and undefined are only assignable to void or their respective types. This helps prevent runtime errors by ensuring that variables are properly checked for null or undefined values.

Example:

{ "compilerOptions": { "strictNullChecks": true } }

With strictNullChecks enabled:

let name: string = "Alice"; // name = null; // Error: Type 'null' is not assignable to type 'string'. function greet(name: string | null) { if (name) { console.log(`Hello, ${name}`); } else { console.log("Hello, guest"); } } greet(null); // Works correctly because we handle the null case.

React Native Example with `tsconfig.json`

tsconfig.json:

{ "compilerOptions": { "target": "es6", "module": "commonjs", "strict": true, "esModuleInterop": true, "outDir": "build", "rootDir": "src", "sourceMap": true, "noImplicitAny": true, "strictNullChecks": true, "incremental": true }, "include": ["src/**/*"], "exclude": ["node_modules", "build"] }

Example Component:

// src/components/Greet.tsx import React from 'react'; import { Text, View } from 'react-native'; type GreetProps = { name: string | null; }; const Greet: React.FC<GreetProps> = ({ name }) => ( <View> <Text>{name ? `Hello, ${name}` : "Hello, guest"}</Text> </View> ); export default Greet;

@types & Integrating TypeScripts

60. How do you manage type definitions for external libraries in TypeScript?

TypeScript uses declaration files (with the .d.ts extension) to provide type information about external JavaScript libraries. These files define the types and APIs of the libraries so that TypeScript can check your code for type errors.

Example:

To add type definitions for an external library, you can install the types from the DefinitelyTyped repository using npm:

npm install @types/lodash

This command installs type definitions for the lodash library, allowing you to use it with TypeScript with full type-checking support.

61. What is DefinitelyTyped and how is it related to TypeScript?

DefinitelyTyped is a repository of high-quality TypeScript type definitions for popular JavaScript libraries. It provides community-contributed type definitions that allow TypeScript to understand the types and APIs of these libraries. The type definitions are distributed via npm under the @types scope.

62. Explain how to use typing files from npm.

Typing files from npm can be used by installing the corresponding @types package for the library you want to use. These packages provide type information that TypeScript can use to type-check your code.

Example:

To use type definitions for the moment library:

Install the moment library and its type definitions:

npm install moment npm install @types/moment

Use the library in your TypeScript code:

import * as moment from 'moment'; const now = moment().format('MMMM Do YYYY, h:mm:ss a'); console.log(now);

63. How do you integrate TypeScript with Angular?

Angular has built-in support for TypeScript, and it’s the recommended language for developing Angular applications. Angular CLI generates TypeScript code and configuration by default.

Example:

Install Angular CLI:

npm install -g @angular/cli

Create a new Angular project:

ng new my-angular-app

The project will be set up with TypeScript, and you can start developing your Angular application using TypeScript.

64. Explain integrating TypeScript with React.

To integrate TypeScript with React, you can use the create-react-app tool with TypeScript template or set up a custom configuration.

Example:

Create a new React app with TypeScript:

npx create-react-app my-react-app --template typescript

Use TypeScript in your React components:

// src/App.tsx import React from 'react'; type AppProps = { message: string; }; const App: React.FC<AppProps> = ({ message }) => ( <div> <h1>{message}</h1> </div> ); export default App;

65. How do you use TypeScript with Vue.js?

To use TypeScript with Vue.js, you can use the Vue CLI to create a new project with TypeScript support.

Example:

Install Vue CLI:

npm install -g @vue/cli

Create a new Vue project with TypeScript:

vue create my-vue-app

Select the TypeScript option during the project creation.
Use TypeScript in your Vue components:

// src/components/HelloWorld.vue <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ props: { msg: String } }); </script>

66. Discuss using TypeScript in a Node.js application.

To use TypeScript in a Node.js application, you need to set up TypeScript and configure it properly.

Example:

Initialize a Node.js project:

npm init -y

Install TypeScript and types for Node.js:

npm install typescript @types/node

Create a tsconfig.json file:

{ "compilerOptions": { "target": "es6", "module": "commonjs", "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true }, "include": ["src/**/*"] }

Write your TypeScript code in the src directory:

// src/index.ts import * as http from 'http'; const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello, TypeScript with Node.js!\n'); }); server.listen(3000, () => { console.log('Server running at http://localhost:3000/'); });

Compile the TypeScript code and run the application:

npx tsc node dist/index.js

These explanations and examples provide a comprehensive understanding of managing type definitions and integrating TypeScript with various frameworks, especially in the context of developing with React, Vue.js, Angular, and Node.js.

Tooling & Ecosystem

67. What are the benefits of using tools like TSLint?

TSLint was a tool for linting TypeScript code, helping developers catch potential errors and enforce coding standards. Although TSLint has been deprecated in favor of ESLint, its benefits included:

Enforcing consistent coding styles and conventions.
Catching common errors and potential bugs early.
Improving code quality and maintainability.
Integrating with build processes and IDEs to provide real-time feedback.

68. Can you describe how to set up a build process with TypeScript and Webpack?

Setting up a build process with TypeScript and Webpack involves configuring Webpack to handle TypeScript files, transpile them to JavaScript, and bundle them for deployment.

Example:

Install necessary packages:

npm install --save-dev typescript ts-loader webpack webpack-cli

Create a tsconfig.json file for TypeScript configuration:

{ "compilerOptions": { "target": "es6", "module": "commonjs", "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true } }

Create a webpack.config.js file for Webpack configuration:

const path = require('path'); module.exports = { entry: './src/index.ts', module: { rules: [ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { extensions: ['.ts', '.js'] }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };

Create your TypeScript source file (src/index.ts):

console.log('Hello, TypeScript with Webpack!');

Add a build script to package.json:

"scripts": { "build": "webpack" }

Run the build process:

npm run build

69. How does TypeScript work with Babel?

Babel can be used to transpile TypeScript code to JavaScript. This is useful if you want to leverage Babel’s extensive plugin ecosystem alongside TypeScript.

Example:

Install necessary packages:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript

Create a babel.config.json file:

{ "presets": [ "@babel/preset-env", "@babel/preset-typescript" ] }

Create a tsconfig.json file:

{ "compilerOptions": { "target": "es6", "module": "commonjs", "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true } }

Create your TypeScript source file (src/index.ts):

console.log('Hello, TypeScript with Babel!');

Add a build script to package.json:

"scripts": { "build": "babel src --out-dir dist --extensions \".ts\"" }

Run the build process:

npm run build

70. Explain using TypeScript with Visual Studio Code or other IDEs.

Visual Studio Code (VS Code) has built-in support for TypeScript, providing features such as IntelliSense, debugging, and code navigation. You can enhance your TypeScript development experience with extensions like ESLint, Prettier, and others.

Example setup:

Open your TypeScript project in VS Code.
Install the ESLint and Prettier extensions from the Extensions Marketplace.
Configure your .eslintrc.json and .prettierrc files as needed.
Enjoy features like IntelliSense, inline error reporting, and code formatting.

71. What are the best practices for structuring a TypeScript application?

Best practices for structuring a TypeScript application include:

Organize code into modules and directories logically.
Use tsconfig.json for TypeScript configuration.
Leverage TypeScript features like interfaces and types for type safety.
Write tests and use a testing framework like Jest.
Follow a consistent coding style using tools like ESLint and Prettier.

Example structure:

src/ components/ MyComponent.tsx services/ ApiService.ts models/ User.ts utils/ helpers.ts index.ts tests/ MyComponent.test.tsx ApiService.test.ts tsconfig.json .eslintrc.json .prettierrc package.json

72. How do you handle async/await in TypeScript?

TypeScript provides full support for async and await, allowing you to write asynchronous code that is more readable and maintainable.

Example:

async function fetchData(url: string): Promise<any> { const response = await fetch(url); if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); } async function main() { try { const data = await fetchData('https://api.example.com/data'); console.log(data); } catch (error) { console.error('Error:', error); } } main();

73. Discuss how you manage state in TypeScript-based applications.

In TypeScript-based applications, you can manage state using various state management libraries like Redux, MobX, or React’s built-in useState and useReducer hooks.

Example with React and useState:

import React, { useState } from 'react'; type CounterProps = { initialCount: number; }; const Counter: React.FC<CounterProps> = ({ initialCount }) => { const [count, setCount] = useState<number>(initialCount); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }; export default Counter;

Example with Redux:

Install Redux and its TypeScript bindings:

npm install redux react-redux @types/react-redux

Define state and actions:

// src/store/types.ts export interface AppState { count: number; } export const INCREMENT = 'INCREMENT'; interface IncrementAction { type: typeof INCREMENT; } export type AppActions = IncrementAction;

Create reducer and store:

// src/store/reducers.ts import { AppState, AppActions, INCREMENT } from './types'; const initialState: AppState = { count: 0, }; export const reducer = (state = initialState, action: AppActions): AppState => { switch (action.type) { case INCREMENT: return { ...state, count: state.count + 1 }; default: return state; } }; // src/store/index.ts import { createStore } from 'redux'; import { reducer } from './reducers'; export const store = createStore(reducer);

Connect React component to Redux store:

// src/components/Counter.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { AppState, INCREMENT } from '../store/types'; const Counter: React.FC = () => { const count = useSelector((state: AppState) => state.count); const dispatch = useDispatch(); return ( <div> <p>Count: {count}</p> <button onClick={() => dispatch({ type: INCREMENT })}>Increment</button> </div> ); }; export default Counter;

74. What are some common design patterns used in TypeScript?

Common design patterns used in TypeScript include:

Singleton: Ensures a class has only one instance and provides a global point of access to it.
Factory: Creates objects without specifying the exact class of object that will be created.
Observer: Defines a one-to-many dependency between objects so that when one object changes state, all its dependents are notified.
Strategy: Defines a family of algorithms, encapsulates each one, and makes them interchangeable.

Example of Singleton Pattern:

class Singleton { private static instance: Singleton; private constructor() {} static getInstance(): Singleton { if (!Singleton.instance) { Singleton.instance = new Singleton(); } return Singleton.instance; } } const singleton1 = Singleton.getInstance(); const singleton2 = Singleton.getInstance(); console.log(singleton1 === singleton2); // true

75. How do you debug a TypeScript application?

Debugging a TypeScript application can be done using various tools and techniques:

Source Maps: Enable sourceMap in tsconfig.json to map compiled JavaScript code back to the original TypeScript source code. This helps in debugging with breakpoints.
Integrated Development Environments (IDEs): Use an IDE like Visual Studio Code, which has built-in support for TypeScript and debugging tools.
Browser Developer Tools: Use browser developer tools to set breakpoints, inspect variables, and step through code.

Example setup for VS Code debugging:

Enable sourceMap in tsconfig.json:

{ "compilerOptions": { "sourceMap": true } }

Create a launch configuration in .vscode/launch.json:

{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "skipFiles": ["<node_internals>/**"], "program": "${workspaceFolder}/src/index.ts", "preLaunchTask": "tsc: build - tsconfig.json", "outFiles": ["${workspaceFolder}/dist/**/*.js"] } ] }

Add a build task in .vscode/tasks.json:

{ "version": "2.0.0", "tasks": [ { "label": "tsc: build - tsconfig.json", "type": "typescript", "tsconfig": "tsconfig.json", "problemMatcher": ["$tsc"], "group": { "kind": "build", "isDefault": true } } ] }

Testing & QA

76. How do you write unit tests for TypeScript code?

Unit tests for TypeScript code can be written using testing frameworks like Jest or Mocha along with TypeScript support.

Example with Jest:

Install necessary packages:

npm install --save-dev jest @types/jest ts-jest

Create a jest.config.js file:

module.exports = { preset: 'ts-jest', testEnvironment: 'node', testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'] };

Write your TypeScript code:

// src/sum.ts export function sum(a: number, b: number): number { return a + b; }

Write a unit test:

// src/sum.test.ts import { sum } from './sum'; test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3); });

Run the tests:

npx jest

77. What testing frameworks are commonly used with TypeScript?

Commonly used testing frameworks with TypeScript include:

Jest: A powerful, easy-to-use testing framework with built-in support for TypeScript through ts-jest.
Mocha: A flexible testing framework that can be used with ts-node and chai for TypeScript support.
Jasmine: Another popular testing framework that can be used with TypeScript.
Karma: A test runner that can be integrated with Jasmine, Mocha, or other testing frameworks.

78. Discuss how to perform end-to-end testing in TypeScript applications.

End-to-end (E2E) testing in TypeScript applications can be performed using tools like Cypress or TestCafe, which support TypeScript.

Example with Cypress:

Install Cypress and its TypeScript support:

npm install --save-dev cypress @types/cypress

Configure Cypress to use TypeScript by adding a tsconfig.json in the cypress directory:

{ "compilerOptions": { "target": "es5", "lib": ["es5", "dom"], "types": ["cypress"] } }

Write an E2E test in TypeScript:

// cypress/integration/sample_spec.ts describe('My First Test', () => { it('Visits the Kitchen Sink', () => { cy.visit('https://example.cypress.io'); cy.contains('type').click(); cy.url().should('include', '/commands/actions'); cy.get('.action-email').type('fake@email.com').should('have.value', 'fake@email.com'); }); });

Run Cypress:

npx cypress open

79. How do you use TypeScript with Express.js?

To use TypeScript with Express.js, you need to set up a TypeScript project and install the necessary types for Express.

Install necessary packages:

npm install express @types/express typescript ts-node

Create a tsconfig.json file:

{ "compilerOptions": { "target": "es6", "module": "commonjs", "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true } }

Write your Express application:

// src/app.ts import express, { Request, Response } from 'express'; const app = express(); const port = 3000; app.get('/', (req: Request, res: Response) => { res.send('Hello, TypeScript with Express!'); }); app.listen(port, () => { console.log(`Server running at http://localhost:${port}/`); });

Compile and run the application:

npx tsc node dist/app.js

80. Discuss creating RESTful services with TypeScript.

Creating RESTful services with TypeScript involves setting up an Express server and defining routes for CRUD operations.

Example:

Install necessary packages:

npm install express @types/express body-parser typescript ts-node

Create a tsconfig.json file:

{ "compilerOptions": { "target": "es6", "module": "commonjs", "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true } }

Write your RESTful service:

// src/app.ts import express, { Request, Response } from 'express'; import bodyParser from 'body-parser'; const app = express(); const port = 3000; app.use(bodyParser.json()); interface Todo { id: number; title: string; completed: boolean; } let todos: Todo[] = [ { id: 1, title: 'Learn TypeScript', completed: false }, { id: 2, title: 'Learn Express', completed: false } ]; app.get('/todos', (req: Request, res: Response) => { res.json(todos); }); app.post('/todos', (req: Request, res: Response) => { const newTodo: Todo = req.body; todos.push(newTodo); res.status(201).json(newTodo); }); app.listen(port, () => { console.log(`Server running at http://localhost:${port}/`); });

Compile and run the application:

npx tsc node dist/app.js

81. Explain how to handle data modeling in a TypeScript backend.

Data modeling in a TypeScript backend can be handled using interfaces and classes to define the structure of the data objects.

Example:

interface User { id: number; name: string; email: string; } class UserModel { private users: User[] = []; createUser(user: User): User { this.users.push(user); return user; } getUserById(id: number): User | undefined { return this.users.find(user => user.id === id); } } const userModel = new UserModel(); const newUser = userModel.createUser({ id: 1, name: 'Alice', email: 'alice@example.com' }); console.log(userModel.getUserById(1));

82. How do you manage database interactions in TypeScript?

Database interactions in TypeScript can be managed using ORM libraries like TypeORM, Sequelize, or Mongoose (for MongoDB).

Example with TypeORM:

Install necessary packages:

npm install typeorm reflect-metadata sqlite3

Create a tsconfig.json file:

{ "compilerOptions": { "target": "es6", "module": "commonjs", "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true, "experimentalDecorators": true, "emitDecoratorMetadata": true } }

Define an entity and repository:

// src/entity/User.ts import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm'; @Entity() export class User { @PrimaryGeneratedColumn() id: number; @Column() name: string; @Column() email: string; }

Set up TypeORM and create a database connection:

// src/index.ts import 'reflect-metadata'; import { createConnection } from 'typeorm'; import { User } from './entity/User'; createConnection({ type: 'sqlite', database: 'database.sqlite', entities: [User], synchronize: true, logging: false }).then(async connection => { const userRepository = connection.getRepository(User); const user = new User(); user.name = 'John Doe'; user.email = 'john.doe@example.com'; await userRepository.save(user); const savedUsers = await userRepository.find(); console.log('All users:', savedUsers); }).catch(error => console.log(error));

Compile and run the application:

npx tsc node dist/index.js

83. Discuss authentication and authorization strategies in TypeScript APIs.

Authentication and authorization can be implemented using various strategies like JWT (JSON Web Tokens), OAuth, or session-based authentication.

Example with JWT:

Install necessary packages:

npm install jsonwebtoken @types/jsonwebtoken express express-jwt @types/express

Create middleware for JWT authentication:

// src/middleware/auth.ts import expressJwt from 'express-jwt'; import jwt from 'jsonwebtoken'; const secret = 'your_jwt_secret'; export const jwtMiddleware = expressJwt({ secret, algorithms: ['HS256'] }); export const generateToken = (user: any) => { return jwt.sign(user, secret, { expiresIn: '1h' }); };

Protect routes with JWT middleware:

// src/app.ts import express, { Request, Response } from 'express'; import { jwtMiddleware, generateToken } from './middleware/auth'; const app = express(); const port = 3000; app.use(express.json()); app.post('/login', (req: Request, res: Response) => { const { username, password } = req.body; if (username === 'admin' && password === 'password') { const token = generateToken({ username }); res.json({ token }); } else { res.status(401).send('Invalid credentials'); } }); app.get('/protected', jwtMiddleware, (req: Request, res: Response) => { res.send('This is a protected route'); }); app.listen(port, () => { console.log(`Server running at http://localhost:${port}/`); });

Compile and run the application:

npx tsc node dist/app.js

Advanced Practices

84. Discuss using TypeScript for Domain-driven Design (DDD).

Domain-driven Design (DDD) is a software development approach focusing on modeling software to match a domain according to input from domain experts. TypeScript is well-suited for DDD due to its strong typing and interface features, which help in creating clear and maintainable domain models.

Example:

Define domain entities and value objects:

// src/domain/User.ts export class User { constructor(public id: UserId, public name: UserName) {} } export class UserId { constructor(public value: string) {} } export class UserName { constructor(public value: string) {} }

Create repositories and services:

// src/domain/UserRepository.ts import { User } from './User'; export interface UserRepository { findById(id: string): Promise<User | null>; save(user: User): Promise<void>; }

Implement application services:

// src/application/UserService.ts import { UserRepository } from '../domain/UserRepository'; import { User, UserId, UserName } from '../domain/User'; export class UserService { constructor(private userRepository: UserRepository) {} async registerUser(id: string, name: string): Promise<void> { const user = new User(new UserId(id), new UserName(name)); await this.userRepository.save(user); } }

85. How do you implement Event Sourcing in TypeScript?

Event Sourcing is a pattern where changes to the application state are stored as a sequence of events. TypeScript can be used to implement Event Sourcing by defining event types and handlers.

Example:

Define event types:

// src/events/UserEvents.ts export interface UserRegisteredEvent { type: 'UserRegistered'; data: { userId: string; userName: string; }; } export interface UserNameChangedEvent { type: 'UserNameChanged'; data: { userId: string; newUserName: string; }; } export type UserEvent = UserRegisteredEvent | UserNameChangedEvent;

Create event store and event handler:

// src/eventStore/EventStore.ts import { UserEvent } from '../events/UserEvents'; export class EventStore { private events: UserEvent[] = []; append(event: UserEvent) { this.events.push(event); } getEvents(): UserEvent[] { return this.events; } } // src/handlers/UserEventHandler.ts import { EventStore } from '../eventStore/EventStore'; import { UserEvent } from '../events/UserEvents'; export class UserEventHandler { constructor(private eventStore: EventStore) {} handle(event: UserEvent) { this.eventStore.append(event); // Handle the event (e.g., update read models) } }

86. Explain the concept of Isomorphic apps with TypeScript.

Isomorphic (or Universal) apps are applications that can run both on the server and the client. TypeScript’s strong typing and support for both Node.js and browser environments make it an excellent choice for building isomorphic apps.

Example with Next.js:

Install Next.js and TypeScript:

npx create-next-app@latest --typescript

Create a shared component:

// src/components/Hello.tsx import React from 'react'; type HelloProps = { name: string; }; const Hello: React.FC<HelloProps> = ({ name }) => <div>Hello, {name}!</div>; export default Hello;

Use the component in a page:

// src/pages/index.tsx import React from 'react'; import Hello from '../components/Hello'; const Home: React.FC = () => ( <div> <Hello name="Isomorphic TypeScript" /> </div> ); export default Home;

87. How does TypeScript align with the latest ECMAScript standards?

TypeScript is designed to align closely with ECMAScript standards, providing early access to upcoming features through the target and lib compiler options. It supports all current ECMAScript features and allows developers to write modern JavaScript code with type safety.

88. What enhancements has TypeScript brought to match ES6 and beyond?

TypeScript has brought several enhancements to match ES6 and beyond, including:

Type Annotations: Adds static typing to JavaScript.
Interfaces: Provides a way to define the shape of objects.
Enums: Adds support for enumerated types.
Generics: Allows writing reusable and type-safe code.
Decorators: Experimental feature for adding metadata and modifying behavior of classes and properties.
Async/Await: Support for writing asynchronous code more elegantly.

89. Discuss how TypeScript handles async iterators.

TypeScript supports async iterators, which allow you to iterate over asynchronous data sources using the for-await-of loop.

Example:

async function* fetchItems(urls: string[]) { for (const url of urls) { const response = await fetch(url); const data = await response.json(); yield data; } } async function processItems(urls: string[]) { for await (const item of fetchItems(urls)) { console.log(item); } } const urls = ['https://api.example.com/item1', 'https://api.example.com/item2']; processItems(urls);

Performance Optimization

90. How do you optimize the performance of a TypeScript application?

Optimizing the performance of a TypeScript application involves several strategies:

Code Splitting: Divide your code into smaller chunks that can be loaded on demand.
Lazy Loading: Load modules only when they are needed, rather than at startup.
Tree Shaking: Remove unused code during the bundling process.
Minification: Reduce the size of your JavaScript files by removing whitespace, comments, and other unnecessary characters.
Using Efficient Data Structures: Choose the right data structures for your use case to optimize memory usage and performance.
Profiling and Benchmarking: Use tools like Chrome DevTools, Lighthouse, or Webpack Bundle Analyzer to identify and address performance bottlenecks.

91. Discuss tree shaking in TypeScript.

Tree shaking is a technique used to eliminate dead code (unused code) from the final bundle. It relies on the static analysis of ES6 module imports and exports to identify and remove code that is not used anywhere in the application.

Example:

Write TypeScript code with unused functions:

// src/util.ts export function usedFunction() { console.log('This function is used'); } export function unusedFunction() { console.log('This function is not used'); } // src/index.ts import { usedFunction } from './util'; usedFunction();

Configure Webpack for tree shaking:

// webpack.config.js const path = require('path'); module.exports = { mode: 'production', entry: './src/index.ts', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/, }, ], }, resolve: { extensions: ['.ts', '.js'], }, optimization: { usedExports: true, }, };

Build the project:

npx webpack --config webpack.config.js

This setup will ensure that the unusedFunction is removed from the final bundle.

92. Explain how to optimize bundle size with TypeScript.

Optimizing bundle size with TypeScript can be achieved through several techniques:

Tree Shaking: Ensure that only the code that is used is included in the bundle.
Code Splitting: Split the code into smaller chunks that can be loaded on demand.
Minification: Use tools like Terser to minify the output JavaScript.
Remove Unnecessary Polyfills: Only include polyfills for the features you actually use.
Optimize Dependencies: Remove unused dependencies and use lighter alternatives when possible.
Dynamic Imports: Use dynamic imports to load modules only when they are needed.

Example:

Dynamic Import Example:

// src/app.ts document.getElementById('loadButton')?.addEventListener('click', async () => { const { usedFunction } = await import('./util'); usedFunction(); });

Configure Webpack for Code Splitting:

// webpack.config.js const path = require('path'); module.exports = { mode: 'production', entry: './src/app.ts', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/, }, ], }, resolve: { extensions: ['.ts', '.js'], }, optimization: { splitChunks: { chunks: 'all', }, }, };

93. What are the new features included in the latest TypeScript release?

The latest TypeScript releases often include various new features, performance improvements, and bug fixes. Some of the recent features include:

Template Literal Types: Allows you to create types based on template literals.
Labeled Tuple Elements: Adds labels to tuple elements to make them more readable.
Improved Type Inference in Conditional Types: Enhances the ability to infer types in complex conditional types.
Recursive Type Aliases: Allows type aliases to reference themselves.

94. How do you use Template Literal Types?

Template Literal Types allow you to create types by combining string literals with union types.

Example:

type Color = 'red' | 'green' | 'blue'; type Size = 'small' | 'medium' | 'large'; type ProductID = `${Color}-${Size}`; const product1: ProductID = 'red-small'; const product2: ProductID = 'green-large'; // Error: Type '"yellow-medium"' is not assignable to type 'ProductID' // const product3: ProductID = 'yellow-medium';

95. Discuss the improvements to Inference in Conditional Types.

TypeScript’s improvements to inference in conditional types allow for more accurate and predictable type inference, especially in complex scenarios. These improvements help TypeScript understand the relationships between types better and provide more precise type checking.

Example:

type IsString<T> = T extends string ? true : false; type Test1 = IsString<string>; // true type Test2 = IsString<number>; // false

96. What is the use of labeled tuple elements?

Labeled tuple elements improve the readability and usability of tuples by allowing you to add labels to each element. This makes it easier to understand the purpose of each element in the tuple.

Example:

type Point = [x: number, y: number]; const point: Point = [10, 20]; const x = point[0]; // 10 const y = point[1]; // 20

Community & Development

97. How can you contribute to the TypeScript community or TypeScript itself?

Contributing to the TypeScript community or TypeScript itself can be done in several ways:

Contributing to the TypeScript Codebase:

Fork the TypeScript repository: Fork the TypeScript GitHub repository.
Set up your development environment: Follow the contribution guidelines.
Submit Pull Requests: Work on issues or new features and submit pull requests for review.

Creating Type Definitions:

Contribute to the DefinitelyTyped repository by creating or improving type definitions for popular JavaScript libraries.

Writing Tutorials and Documentation:

Write blog posts, tutorials, or create video content to help others learn TypeScript.
Contribute to the official TypeScript documentation.

Participating in Discussions:

Join the TypeScript community on GitHub, Stack Overflow, or other forums to help answer questions and discuss TypeScript-related topics.

Creating Open Source Projects:

Develop and share TypeScript-based libraries, tools, or applications on GitHub.

98. Discuss the role of TypeScript in open-source development.

TypeScript plays a significant role in open-source development by providing a statically typed superset of JavaScript that helps developers catch errors early, maintain large codebases, and improve code readability. Its adoption in open-source projects has led to more robust and reliable software. Many popular open-source projects, such as Angular, Vue.js, and NestJS, are written in TypeScript, highlighting its importance in the ecosystem.

99. Explain how to stay updated with TypeScript’s changes and best practices.

To stay updated with TypeScript’s changes and best practices, you can:

Follow the TypeScript Blog:

Subscribe to the official TypeScript blog for announcements, updates, and best practices.

Join the TypeScript Community:

Participate in discussions on the TypeScript GitHub discussions and Stack Overflow.

Subscribe to Newsletters:

Subscribe to TypeScript-focused newsletters like TypeScript Weekly.

Attend Conferences and Meetups:

Attend conferences, webinars, and local meetups to learn from experts and network with other TypeScript developers.

Follow Influential TypeScript Developers:

Follow influential developers on social media platforms like Twitter, GitHub, and LinkedIn.

Read Books and Documentation:

Stay updated by reading the latest books on TypeScript and regularly reviewing the official TypeScript documentation.

100. What steps should a JavaScript developer take to start using TypeScript effectively?

For a JavaScript developer to start using TypeScript effectively, they can follow these steps:

Learn the Basics:

Understand the core concepts of TypeScript, such as type annotations, interfaces, and classes, by reviewing the official TypeScript handbook.

Set Up a TypeScript Project:

Install TypeScript globally: npm install -g typescript.
Initialize a TypeScript project: tsc --init.
Configure tsconfig.json for your project’s needs.

Gradually Migrate Existing Code:

Start by renaming .js files to .ts or .tsx (for React projects).
Incrementally add type annotations and interfaces to existing code.
Use any type initially and gradually replace it with specific types as you become more comfortable.

Leverage TypeScript Tools:

Use IDEs like Visual Studio Code, which provide excellent TypeScript support, including IntelliSense and inline error reporting.
Use linters like ESLint with TypeScript support to maintain code quality.

Write Type-safe Code:

Embrace TypeScript features such as type inference, union types, intersection types, and generics to write more robust and maintainable code.

Practice and Explore:

Build small projects or contribute to open-source projects written in TypeScript to gain hands-on experience.

Stay Updated:

Follow TypeScript news, join the community, and keep up with the latest features and best practices.

By following these steps, JavaScript developers can transition to TypeScript smoothly and take advantage of its benefits in their projects.

GraphQL interview questions

Tài Liệu - Khóa Học Free

16 min
2 năm ago
2

GraphQL Fundamentals 1. What is GraphQL and how does it differ from REST? GraphQL:GraphQL is a query language for APIs and a runtime for executing those queries by using a type system you define for your data. It was developed by Facebook […]

Tagged #interview, #ReactNative

1. What is GraphQL and how does it differ from REST?

GraphQL:
GraphQL is a query language for APIs and a runtime for executing those queries by using a type system you define for your data. It was developed by Facebook in 2012 and released publicly in 2015.

Differences from REST:

Single Endpoint: In REST, you typically have multiple endpoints for different resources. In GraphQL, you have a single endpoint to query all the data.
Fetching Data: In REST, over-fetching and under-fetching of data can occur because of fixed endpoints. GraphQL allows you to request exactly the data you need.
Schema and Type System: GraphQL uses a strongly typed schema to define the structure of your API, enabling clients to know what data they can request and what data they will receive.

Example Code (GraphQL Query):

query { user(id: "1") { name email } }

Example Code (REST Request):

fetch('https://api.example.com/users/1') .then(response => response.json()) .then(data => { console.log(data.name); console.log(data.email); });

2. Explain the main components of the GraphQL architecture.

Main Components:

Schema: Defines the types and structure of the data that can be queried.
Resolvers: Functions that resolve a value for a type or field in the schema.
Queries: Read operations to fetch data.
Mutations: Write operations to modify data.
Types: Define the shape of the data (e.g., ObjectType, ScalarType).

Example Schema (Type Definition):

type User { id: ID! name: String! email: String! }

Example Resolver:

const resolvers = { Query: { user: (_, { id }) => { return users.find(user => user.id === id); }, }, };

3. Can you describe the structure of a GraphQL query?

A GraphQL query is structured to specify:

The operation type (query or mutation).
The fields to be retrieved or modified.
Optional arguments to filter or modify the data.

Example Query:

query { user(id: "1") { name email } }

Example Response:

{ "data": { "user": { "name": "John Doe", "email": "john.doe@example.com" } } }

4. What are the core features of GraphQL?

Declarative Data Fetching: Clients can specify exactly what data they need.
Single Endpoint: All interactions go through a single URL.
Strongly Typed: Uses a schema to define types and relationships.
Introspection: Clients can query the schema to understand available data.
Real-time Data: Subscriptions allow clients to receive updates when data changes.

Example Subscription:

subscription { newMessage { id content author } }

5. What is a GraphQL schema and why is it important?

Schema:
A schema in GraphQL defines the structure and types of data that can be queried. It specifies what queries and mutations are available and what types of data they return.

Importance:

Ensures consistency in data fetching.
Provides clear documentation for API clients.
Enables powerful developer tools like auto-completion and error checking.

Example Schema Definition:

type Query { user(id: ID!): User } type User { id: ID! name: String! email: String! }

6. Explain the concept of fields in GraphQL.

Fields:
Fields are the basic units of a GraphQL query. Each field represents a piece of data that can be retrieved from the server.

Example Query with Fields:

query { user(id: "1") { name email } }

Example Resolver for Fields:

const resolvers = { Query: { user: (_, { id }) => { return users.find(user => user.id === id); }, }, User: { name: (user) => user.name, email: (user) => user.email, }, };

7. How does GraphQL handle data types?

Data Types:
GraphQL has several built-in scalar types such as Int, Float, String, Boolean, and ID. You can also define custom object types and enums.

Example Scalar and Object Types:

type User { id: ID! name: String! email: String! age: Int } enum Role { ADMIN USER }

8. In GraphQL, what are queries and mutations?

Queries:
Queries are read-only operations used to fetch data.

Mutations:
Mutations are used to modify data on the server.

Example Query:

query { user(id: "1") { name email } }

Example Mutation:

mutation { createUser(name: "John Doe", email: "john.doe@example.com") { id name email } }

Example Resolver for Mutation:

const resolvers = { Mutation: { createUser: (_, { name, email }) => { const newUser = { id: generateId(), name, email }; users.push(newUser); return newUser; }, }, };

9. Describe how you would fetch data with a GraphQL query.

Fetching Data with GraphQL in React Native:

Install graphql and apollo-client libraries.
Set up the Apollo Client.
Write the query.
Use the useQuery hook to fetch data.

Example Code:

import { ApolloClient, InMemoryCache, gql, ApolloProvider, useQuery } from '@apollo/client'; import React from 'react'; import { View, Text } from 'react-native'; const client = new ApolloClient({ uri: 'https://api.example.com/graphql', cache: new InMemoryCache() }); const GET_USER = gql` query GetUser($id: ID!) { user(id: $id) { name email } } `; const UserComponent = ({ userId }) => { const { loading, error, data } = useQuery(GET_USER, { variables: { id: userId } }); if (loading) return <Text>Loading...</Text>; if (error) return <Text>Error: {error.message}</Text>; return ( <View> <Text>Name: {data.user.name}</Text> <Text>Email: {data.user.email}</Text> </View> ); }; const App = () => ( <ApolloProvider client={client}> <UserComponent userId="1" /> </ApolloProvider> ); export default App;

10. What are scalar types in GraphQL?

Scalar Types:
Scalar types represent the leaf nodes of a query and cannot have sub-fields. GraphQL provides built-in scalar types: Int, Float, String, Boolean, and ID.

Example Scalar Type Usage:

type User { id: ID! name: String! age: Int isActive: Boolean }

11. Explain the role of resolvers in GraphQL.

Resolvers:
Resolvers are functions that resolve the value for a type or field in the schema. They are used to fetch data from a database or other data source.

Example Resolver:

const resolvers = { Query: { user: (_, { id }) => { return users.find(user => user.id === id); }, }, User: { name: (user) => user.name, email: (user) => user.email, }, };

12. What are the advantages of using GraphQL over other API query languages?

Advantages:

Efficient Data Fetching: Clients can request exactly the data they need, reducing over-fetching and under-fetching.
Strongly Typed: Ensures data consistency and validation.
Single Endpoint: Simplifies API architecture.
Introspection: Allows clients to query the schema for available data and types.
Real-time Data: Supports subscriptions for real-time updates.

Example Subscription:

subscription { newMessage { id content author } }

These examples and explanations should provide a comprehensive understanding of GraphQL and its use in React Native

13. How do you pass arguments to fields in GraphQL queries?

Passing Arguments:
Arguments are passed to fields in GraphQL queries to filter or modify the data being fetched.

Example Query with Arguments:

query getUser($id: ID!) { user(id: $id) { name email } }

Example Code in React Native:

import { ApolloClient, InMemoryCache, gql, ApolloProvider, useQuery } from '@apollo/client'; import React from 'react'; import { View, Text } from 'react-native'; const client = new ApolloClient({ uri: 'https://api.example.com/graphql', cache: new InMemoryCache() }); const GET_USER = gql` query getUser($id: ID!) { user(id: $id) { name email } } `; const UserComponent = ({ userId }) => { const { loading, error, data } = useQuery(GET_USER, { variables: { id: userId } }); if (loading) return <Text>Loading...</Text>; if (error) return <Text>Error: {error.message}</Text>; return ( <View> <Text>Name: {data.user.name}</Text> <Text>Email: {data.user.email}</Text> </View> ); }; const App = () => ( <ApolloProvider client={client}> <UserComponent userId="1" /> </ApolloProvider> ); export default App;

14. What is a fragment in GraphQL and how are they used?

Fragments:
Fragments allow you to reuse parts of a query to avoid repetition. They can be defined once and used multiple times within queries.

Example Fragment:

fragment userFields on User { name email } query { user(id: "1") { ...userFields } }

Example Code in React Native:

import { gql } from '@apollo/client'; const USER_FIELDS = gql` fragment userFields on User { name email } `; const GET_USER = gql` query getUser($id: ID!) { user(id: $id) { ...userFields } } ${USER_FIELDS} `;

15. How does GraphQL handle caching?

Caching:
GraphQL can handle caching at the client level using libraries like Apollo Client. Apollo Client uses in-memory caching to store query results and manage data consistency.

Example Cache Configuration:

import { ApolloClient, InMemoryCache } from '@apollo/client'; const client = new ApolloClient({ uri: 'https://api.example.com/graphql', cache: new InMemoryCache() });

16. What are enums in GraphQL, and when would you use them?

Enums:
Enums are special scalar types that represent a set of constant values. They are used when you have a predefined list of possible values for a field.

Example Enum Definition:

enum Role { ADMIN USER GUEST } type User { id: ID! name: String! role: Role! }

Example Usage in Query:

query { user(id: "1") { name role } }

17. Describe the concept of “schema-first” development in GraphQL.

Schema-First Development:
Schema-first development involves defining the GraphQL schema before writing any resolvers or business logic. This approach ensures a clear contract between the client and server.

Example Schema Definition:

type Query { user(id: ID!): User } type User { id: ID! name: String! email: String! }

Example Resolver:

const resolvers = { Query: { user: (_, { id }) => { return users.find(user => user.id === id); }, }, };

18. How would you handle errors in a GraphQL API?

Handling Errors:
Errors in GraphQL APIs can be handled by returning error messages in the response. Apollo Client provides mechanisms to handle errors at the client level.

Example Error Handling in Resolver:

const resolvers = { Query: { user: (_, { id }) => { const user = users.find(user => user.id === id); if (!user) { throw new Error('User not found'); } return user; }, }, };

Example Error Handling in React Native:

const { loading, error, data } = useQuery(GET_USER, { variables: { id: userId } }); if (loading) return <Text>Loading...</Text>; if (error) return <Text>Error: {error.message}</Text>;

19. Explain the purpose of introspection in GraphQL.

Introspection:
Introspection is a feature of GraphQL that allows clients to query the schema itself to understand the structure and types of data available. This is useful for tools like GraphiQL and for generating documentation.

Example Introspection Query:

query { __schema { types { name fields { name } } } }

20. What is the difference between an operation and a field in GraphQL?

Operation:
An operation in GraphQL is either a query, mutation, or subscription. It defines the action to be performed.

Field:
A field is a unit of data that can be queried. Fields are specified within an operation to fetch or modify specific pieces of data.

Example Operation (Query):

query { user(id: "1") { name email } }

Example Field:
In the above query, user is an operation, and name and email are fields within that operation.

These explanations and code examples should provide a comprehensive understanding of the advanced aspects of GraphQL and its use in React Native.

GraphQL Schema and Types

21. How do you define object types in GraphQL?

Object Types:
Object types in GraphQL are defined using the type keyword. They represent a collection of fields.

Example Definition:

type User { id: ID! name: String! email: String! }

Example Usage in a Schema:

type Query { user(id: ID!): User }

Example Resolver:

const resolvers = { Query: { user: (_, { id }) => { return users.find(user => user.id === id); }, }, };

22. What is the difference between an Interface and a Union in GraphQL?

Interface:
An interface is an abstract type that defines a set of fields that multiple types must include.

Example Interface:

interface Character { id: ID! name: String! } type Hero implements Character { id: ID! name: String! superPower: String! } type Villain implements Character { id: ID! name: String! evilPlan: String! }

Union:
A union type represents a type that could be one of several types. Unlike interfaces, union types don’t require common fields.

Example Union:

union SearchResult = Hero | Villain type Query { search(term: String!): SearchResult }

23. Can you illustrate how GraphQL implements polymorphism?

Polymorphism in GraphQL:
GraphQL implements polymorphism using interfaces and union types. This allows you to query fields that might return different types.

Example Using Interface:

query { characters { id name ... on Hero { superPower } ... on Villain { evilPlan } } }

24. What is the significance of the “!” mark in GraphQL types?

Non-Null Types:
The “!” mark signifies that a field is non-nullable, meaning it must always have a value and cannot be null.

Example Definition:

type User { id: ID! name: String! email: String! }

25. How do you perform validation in GraphQL?

Validation:
Validation in GraphQL can be performed by defining constraints in the schema and by using custom resolvers.

Example with Schema Constraints:

type Query { user(id: ID!): User }

Example with Custom Resolvers:

const resolvers = { Query: { user: (_, { id }) => { if (!isValidId(id)) { throw new Error('Invalid ID format'); } return users.find(user => user.id === id); }, }, }; function isValidId(id) { return /^[0-9a-fA-F]{24}$/.test(id); }

26. Describe the role of input types in GraphQL.

Input Types:
Input types are used to define complex inputs for queries and mutations. They are similar to object types but are used for inputs.

Example Input Type:

input UserInput { name: String! email: String! } type Mutation { createUser(input: UserInput!): User }

Example Resolver:

const resolvers = { Mutation: { createUser: (_, { input }) => { const newUser = { id: generateId(), ...input }; users.push(newUser); return newUser; }, }, };

27. How do you extend a GraphQL schema?

Extending a Schema:
A GraphQL schema can be extended using the extend keyword. This allows you to add fields to existing types or add new types.

Example Extension:

extend type User { age: Int } extend type Query { allUsers: [User] }

28. What are custom scalar types and when might you use them?

Custom Scalar Types:
Custom scalar types allow you to define custom data types beyond the built-in ones. They are useful for specific formats like dates, URLs, or custom ID formats.

Example Custom Scalar:

scalar Date type User { id: ID! name: String! birthdate: Date! }

Example Implementation:

const { GraphQLScalarType } = require('graphql'); const dateScalar = new GraphQLScalarType({ name: 'Date', description: 'Custom date scalar type', serialize(value) { return value.toISOString(); // Convert outgoing Date to ISOString for JSON }, parseValue(value) { return new Date(value); // Convert incoming ISOString to Date }, parseLiteral(ast) { if (ast.kind === Kind.STRING) { return new Date(ast.value); // Convert hard-coded AST string to Date } return null; // Invalid hard-coded value (not an ISOString) }, }); const resolvers = { Date: dateScalar, };

29. Explain the use of directives in GraphQL.

Directives:
Directives are used to modify the execution of queries and schemas. The most common directives are @include, @skip, and @deprecated.

Example Usage of Directives:

query getUser($withEmail: Boolean!) { user(id: "1") { name email @include(if: $withEmail) } }

30. How does GraphQL support pagination and how is it implemented?

Pagination:
GraphQL supports pagination using arguments like limit and offset or by using cursor-based pagination.

Example Pagination with Limit and Offset:

type Query { users(limit: Int, offset: Int): [User] }

Example Resolver for Pagination:

const resolvers = { Query: { users: (_, { limit, offset }) => { return users.slice(offset, offset + limit); }, }, };

Example Pagination with Cursors:

type PageInfo { endCursor: String hasNextPage: Boolean } type UserEdge { node: User cursor: String } type UserConnection { edges: [UserEdge] pageInfo: PageInfo } type Query { users(first: Int, after: String): UserConnection }

Example Resolver for Cursor-Based Pagination:

const resolvers = { Query: { users: (_, { first, after }) => { const startIndex = after ? users.findIndex(user => user.id === after) + 1 : 0; const slicedUsers = users.slice(startIndex, startIndex + first); const edges = slicedUsers.map(user => ({ node: user, cursor: user.id, })); return { edges, pageInfo: { endCursor: edges.length > 0 ? edges[edges.length - 1].cursor : null, hasNextPage: startIndex + first < users.length, }, }; }, }, };

These explanations and code examples should provide a comprehensive understanding of the advanced aspects of GraphQL schema and types.

Redux Interview Total A-Z Full (Q-A)

Tài Liệu - Khóa Học Free

81 min
2 năm ago
16

Redux Fundamentals 1. What is Redux and how is it used in web development? Answer: Redux is a predictable state container for JavaScript applications. It helps manage the state of an application in a predictable way by using a single source of […]

Tagged #interview, #ReactNative

Redux Fundamentals

1. What is Redux and how is it used in web development?

Answer:

Redux is a predictable state container for JavaScript applications. It helps manage the state of an application in a predictable way by using a single source of truth (the store), actions, and reducers.

Usage in Web Development:

State Management: Manages the state of your application in a single store.
Predictability: Ensures the state changes are predictable by enforcing certain rules.
Debugging: Makes it easier to debug and test the application due to its predictable state changes.

2. Can you describe the three principles that Redux is based upon?

Answer:

Single Source of Truth:

The state of the entire application is stored in a single object called the store.

State is Read-Only:

The only way to change the state is to emit an action, an object describing what happened.

Changes are Made with Pure Functions:

To specify how the state tree is transformed by actions, you write pure reducers.

3. What is an action in Redux?

Answer:

Action is a plain JavaScript object that describes an intention to change the state. Actions must have a type property that indicates the type of action being performed.

Example:

const incrementAction = { type: 'INCREMENT', payload: 1 };

4. How are actions used to change the state in a Redux application?

Answer:

Actions are dispatched to the Redux store using the dispatch function. The store then uses reducers to process these actions and update the state accordingly.

Example:

import { createStore } from 'redux'; // Reducer const counter = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + action.payload; case 'DECREMENT': return state - action.payload; default: return state; } }; // Create Store const store = createStore(counter); // Dispatch Actions store.dispatch({ type: 'INCREMENT', payload: 1 }); store.dispatch({ type: 'DECREMENT', payload: 1 }); console.log(store.getState()); // Output: 0

5. What is a reducer in Redux and what role does it play?

Answer:

Reducer is a pure function that takes the previous state and an action, and returns the next state. Reducers specify how the application’s state changes in response to actions sent to the store.

Example:

const counter = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + action.payload; case 'DECREMENT': return state - action.payload; default: return state; } };

6. How does Redux differ from local component state in React?

Answer:

Scope:

Redux: Manages state globally across the entire application.
Local State: Manages state locally within a specific component.

Persistence:

Redux: State is persistent as long as the store exists.
Local State: State is lost when the component is unmounted.

Accessibility:

Redux: Any component can access and update the global state.
Local State: Only the component and its children can access and update the local state.

7. Define “store” in the context of Redux.

Answer:

Store is an object that holds the application state and provides methods to access the state, dispatch actions, and register listeners.

Example:

import { createStore } from 'redux'; // Reducer const counter = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + action.payload; case 'DECREMENT': return state - action.payload; default: return state; } }; // Create Store const store = createStore(counter); console.log(store.getState()); // Output: 0

8. Can you describe the concept of “single source of truth” in Redux?

Answer:

The single source of truth in Redux means that the entire state of the application is stored in a single object within the store. This centralization of the state ensures consistency and makes it easier to manage and debug the application.

9. How do you create a Redux store?

Answer:

You create a Redux store using the createStore function provided by Redux, passing in the root reducer.

Example:

import { createStore } from 'redux'; // Reducer const counter = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + action.payload; case 'DECREMENT': return state - action.payload; default: return state; } }; // Create Store const store = createStore(counter); console.log(store.getState()); // Output: 0

10. What is meant by “immutable state,” and why is it important in Redux?

Answer:

Immutable State means that the state cannot be modified directly. Instead, a new state object is created whenever the state needs to be changed. This is important in Redux because it ensures that state changes are predictable and trackable, making debugging easier.

Example:

const initialState = { count: 0 }; const counter = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + action.payload }; case 'DECREMENT': return { ...state, count: state.count - action.payload }; default: return state; } };

11. Explain the significance of the `combineReducers` function.

Answer:

The combineReducers function is used to combine multiple reducers into a single reducer function. This is useful for splitting the state management logic into smaller, more manageable pieces.

Example:

import { combineReducers, createStore } from 'redux'; const counter = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + action.payload; case 'DECREMENT': return state - action.payload; default: return state; } }; const user = (state = {}, action) => { switch (action.type) { case 'SET_USER': return { ...state, ...action.payload }; default: return state; } }; const rootReducer = combineReducers({ counter, user }); const store = createStore(rootReducer); console.log(store.getState()); // Output: { counter: 0, user: {} }

12. What are pure functions and side effects in the context of Redux?

Answer:

Pure Functions:

A function that returns the same output for the same input without modifying any external state.
Reducers in Redux must be pure functions to ensure predictability.

Example of a Pure Function:

const add = (a, b) => a + b;

Side Effects:

Operations that interact with external systems or change external state, such as API calls or logging.
Side effects are managed using middleware like redux-thunk or redux-saga.

Example of Handling Side Effects with redux-thunk:

import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import axios from 'axios'; // Action const fetchData = () => { return async (dispatch) => { const response = await axios.get('https://api.example.com/data'); dispatch({ type: 'SET_DATA', payload: response.data }); }; }; // Reducer const dataReducer = (state = {}, action) => { switch (action.type) { case 'SET_DATA': return { ...state, ...action.payload }; default: return state; } }; // Create Store with Thunk Middleware const store = createStore(dataReducer, applyMiddleware(thunk)); store.dispatch(fetchData());

Redux Core Concept

13. How do you handle asynchronous actions in Redux?

Answer:

Asynchronous actions in Redux are handled using middleware like redux-thunk or redux-saga.

Using redux-thunk:

Install redux-thunk:

 npm install redux-thunk

Configure Store with Thunk Middleware:

 import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; const reducer = (state = {}, action) => { switch (action.type) { case 'FETCH_SUCCESS': return { ...state, data: action.payload }; default: return state; } }; const store = createStore(reducer, applyMiddleware(thunk));

Define Asynchronous Action Creator:

 import axios from 'axios'; const fetchData = () => { return async (dispatch) => { const response = await axios.get('https://api.example.com/data'); dispatch({ type: 'FETCH_SUCCESS', payload: response.data }); }; }; store.dispatch(fetchData());

14. What is a “selector” in Redux and what is its purpose?

Answer:

A selector is a function that extracts a specific piece of data from the Redux store state. Selectors help in encapsulating state logic and improving code reusability.

Example:

const getUser = (state) => state.user; const mapStateToProps = (state) => ({ user: getUser(state) });

15. How does Redux handle the flow of data and actions?

Answer:

Action: An action is dispatched, describing what happened.

 store.dispatch({ type: 'INCREMENT' });

Reducer: The reducer processes the action and returns the new state.

 const counter = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; default: return state; } };

Store: The store updates its state and notifies the subscribed components.

 const store = createStore(counter);

View: The view reads the state from the store and re-renders accordingly.

 store.subscribe(() => { console.log(store.getState()); });

16. Can you explain the difference between a Container and Presentational component in Redux?

Answer:

Presentational Components:

Focus on how things look.
Receive data and callbacks exclusively via props.
Rarely have their own state.

Container Components:

Focus on how things work.
Connect to the Redux store to read state and dispatch actions.
Pass data and callbacks to presentational components.

Example:

Presentational Component:

const Counter = ({ value, onIncrement }) => ( <div> <h1>{value}</h1> <button onClick={onIncrement}>Increment</button> </div> );

Container Component:

import { connect } from 'react-redux'; const mapStateToProps = (state) => ({ value: state.counter }); const mapDispatchToProps = (dispatch) => ({ onIncrement: () => dispatch({ type: 'INCREMENT' }) }); const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(Counter);

17. What is middleware in Redux and when would you use it?

Answer:

Middleware is a function that intercepts actions dispatched to the Redux store and can perform tasks like logging, crash reporting, asynchronous requests, etc. Middleware is used to extend Redux with custom functionality.

Example:

const loggerMiddleware = (store) => (next) => (action) => { console.log('Dispatching:', action); const result = next(action); console.log('Next state:', store.getState()); return result; }; const store = createStore(reducer, applyMiddleware(loggerMiddleware));

18. How do you access the Redux store in a React component?

Answer:

You access the Redux store in a React component by using the connect function from react-redux or the useSelector and useDispatch hooks.

Example using connect:

import { connect } from 'react-redux'; const mapStateToProps = (state) => ({ value: state.counter }); const mapDispatchToProps = (dispatch) => ({ onIncrement: () => dispatch({ type: 'INCREMENT' }) }); const Counter = ({ value, onIncrement }) => ( <div> <h1>{value}</h1> <button onClick={onIncrement}>Increment</button> </div> ); export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Example using useSelector and useDispatch:

import { useSelector, useDispatch } from 'react-redux'; const Counter = () => { const value = useSelector((state) => state.counter); const dispatch = useDispatch(); return ( <div> <h1>{value}</h1> <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button> </div> ); }; export default Counter;

19. What is the purpose of the `dispatch` function in Redux?

Answer:

The dispatch function is used to send actions to the Redux store. It is the only way to trigger a state change in the Redux store.

Example:

store.dispatch({ type: 'INCREMENT' });

20. What arguments does `createStore` receive in Redux?

Answer:

The createStore function receives three arguments:

reducer (function): A function that returns the next state tree, given the current state tree and the action to handle.
preloadedState (optional): The initial state. Useful for hydrating the state of the client to match the state of the server in universal apps.
enhancer (optional): A function that enhances the store with third-party capabilities, such as middleware or time travel.

Example:

const store = createStore( rootReducer, initialState, applyMiddleware(loggerMiddleware) );

21. Describe the `subscribe` function in Redux.

Answer:

The subscribe function adds a change listener to the store, which will be called any time an action is dispatched, and the state tree might have changed. It returns a function that can be called to unsubscribe the listener.

Example:

const unsubscribe = store.subscribe(() => { console.log('State changed:', store.getState()); }); // To unsubscribe the listener unsubscribe();

Redux Actions

22. How do you structure action creators in Redux?

Answer:

Action creators are functions that create and return action objects. Structuring action creators in a Redux application involves organizing them in a way that they can be easily managed and imported where needed.

Example:

Define Action Types:

 // actionTypes.js export const INCREMENT = 'INCREMENT'; export const DECREMENT = 'DECREMENT'; export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';

Create Action Creators:

 // actions.js import { INCREMENT, DECREMENT, FETCH_DATA_SUCCESS } from './actionTypes'; export const increment = () => ({ type: INCREMENT, }); export const decrement = () => ({ type: DECREMENT, }); export const fetchDataSuccess = (data) => ({ type: FETCH_DATA_SUCCESS, payload: data, });

Using Action Creators in a Component:

 import { useDispatch } from 'react-redux'; import { increment, decrement } from './actions'; const Counter = () => { const dispatch = useDispatch(); return ( <div> <button onClick={() => dispatch(increment())}>Increment</button> <button onClick={() => dispatch(decrement())}>Decrement</button> </div> ); };

23. What is an action type and how is it used in Redux?

Answer:

An action type is a constant that represents the type of action being performed. It is used to identify the action in the reducer function, which determines how the state should change in response to the action.

Example:

Define Action Types:

 // actionTypes.js export const INCREMENT = 'INCREMENT'; export const DECREMENT = 'DECREMENT';

Use Action Types in Reducers:

 import { INCREMENT, DECREMENT } from './actionTypes'; const counter = (state = 0, action) => { switch (action.type) { case INCREMENT: return state + 1; case DECREMENT: return state - 1; default: return state; } };

24. Can you give an example of a synchronous action creator?

Answer:

A synchronous action creator returns an action object immediately.

Example:

Define Action Types:

 // actionTypes.js export const INCREMENT = 'INCREMENT';

Create Synchronous Action Creator:

 // actions.js import { INCREMENT } from './actionTypes'; export const increment = () => ({ type: INCREMENT, });

Use Action Creator in a Component:

 import { useDispatch } from 'react-redux'; import { increment } from './actions'; const Counter = () => { const dispatch = useDispatch(); return ( <div> <button onClick={() => dispatch(increment())}>Increment</button> </div> ); };

25. How do you handle complex state logic in actions?

Answer:

Complex state logic can be handled using thunks or sagas. Thunks allow you to write action creators that return a function instead of an action object. This function can contain complex logic and perform side effects like asynchronous requests.

Example using redux-thunk:

Install redux-thunk:

 npm install redux-thunk

Configure Store with Thunk Middleware:

 import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; const store = createStore(rootReducer, applyMiddleware(thunk));

Define Complex Action Creator:

 // actions.js import { FETCH_DATA_SUCCESS } from './actionTypes'; import axios from 'axios'; export const fetchData = () => { return async (dispatch) => { try { const response = await axios.get('https://api.example.com/data'); dispatch({ type: FETCH_DATA_SUCCESS, payload: response.data }); } catch (error) { console.error('Error fetching data:', error); } }; };

Use Complex Action Creator in a Component:

 import { useDispatch } from 'react-redux'; import { useEffect } from 'react'; import { fetchData } from './actions'; const DataFetcher = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(fetchData()); }, [dispatch]); return ( <div> <h1>Data Fetcher</h1> </div> ); };

26. Explain the concept of action creators returning a function for asynchronous operations.

Answer:

Action creators that return a function instead of an action object are used to handle asynchronous operations. This pattern is typically enabled by middleware like redux-thunk, which allows action creators to return a function that receives the dispatch method as an argument. Inside this function, you can perform asynchronous operations and dispatch actions based on the results.

Example using redux-thunk:

Install redux-thunk:

 npm install redux-thunk

Configure Store with Thunk Middleware:

 import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; const store = createStore(rootReducer, applyMiddleware(thunk));

Define Asynchronous Action Creator:

 // actions.js import { FETCH_DATA_SUCCESS } from './actionTypes'; import axios from 'axios'; export const fetchData = () => { return async (dispatch) => { try { const response = await axios.get('https://api.example.com/data'); dispatch({ type: FETCH_DATA_SUCCESS, payload: response.data }); } catch (error) { console.error('Error fetching data:', error); } }; };

Use Asynchronous Action Creator in a Component:

 import { useDispatch } from 'react-redux'; import { useEffect } from 'react'; import { fetchData } from './actions'; const DataFetcher = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(fetchData()); }, [dispatch]); return ( <div> <h1>Data Fetcher</h1> </div> ); };

Reducers & State Management

27. How do reducers handle state changes in response to different action types?

Answer:

Reducers handle state changes by taking the current state and an action as arguments, and returning a new state based on the action type. The reducer uses a switch statement to determine how to update the state based on the action type.

Example:

const initialState = { count: 0 }; const counterReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; default: return state; } }; // Usage const actionIncrement = { type: 'INCREMENT' }; const actionDecrement = { type: 'DECREMENT' }; let state = counterReducer(undefined, actionIncrement); console.log(state); // { count: 1 } state = counterReducer(state, actionDecrement); console.log(state); // { count: 0 }

28. What is meant by a “slice reducer”?

Answer:

A slice reducer is a reducer that manages a specific part (or slice) of the entire Redux state. It is typically combined with other slice reducers to form the root reducer using combineReducers.

Example:

const userReducer = (state = {}, action) => { switch (action.type) { case 'SET_USER': return { ...state, ...action.payload }; default: return state; } }; const postsReducer = (state = [], action) => { switch (action.type) { case 'ADD_POST': return [...state, action.payload]; default: return state; } }; // Combine slice reducers import { combineReducers } from 'redux'; const rootReducer = combineReducers({ user: userReducer, posts: postsReducer, }); // Usage const store = createStore(rootReducer);

29. Describe how to properly update the state based on an action.

Answer:

To properly update the state based on an action, a reducer should create a new state object by copying the existing state and updating the necessary parts using immutable operations.

Example:

const initialState = { count: 0, user: { name: 'John', age: 30 } }; const appReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'UPDATE_USER': return { ...state, user: { ...state.user, ...action.payload } }; default: return state; } }; // Usage const actionIncrement = { type: 'INCREMENT' }; const actionUpdateUser = { type: 'UPDATE_USER', payload: { age: 31 } }; let state = appReducer(undefined, actionIncrement); console.log(state); // { count: 1, user: { name: 'John', age: 30 } } state = appReducer(state, actionUpdateUser); console.log(state); // { count: 1, user: { name: 'John', age: 31 } }

30. How would you reset the state of a Redux store?

Answer:

To reset the state of a Redux store, you can handle a specific action type in the root reducer to return the initial state.

Example:

const initialState = { count: 0, user: { name: 'John', age: 30 } }; const appReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'RESET': return initialState; default: return state; } }; // Usage const store = createStore(appReducer); store.dispatch({ type: 'INCREMENT' }); console.log(store.getState()); // { count: 1, user: { name: 'John', age: 30 } } store.dispatch({ type: 'RESET' }); console.log(store.getState()); // { count: 0, user: { name: 'John', age: 30 } }

31. Can you discuss reducer composition and its benefits?

Answer:

Reducer Composition is the practice of splitting the reducer logic into smaller, more manageable functions (slice reducers) that handle different parts of the state tree. These slice reducers are then combined using combineReducers.

Benefits:

Modularity: Each reducer handles a specific part of the state, making the code easier to understand and maintain.
Reusability: Reducers can be reused in different parts of the application.
Testability: Smaller functions are easier to test in isolation.

Example:

const userReducer = (state = {}, action) => { switch (action.type) { case 'SET_USER': return { ...state, ...action.payload }; default: return state; } }; const postsReducer = (state = [], action) => { switch (action.type) { case 'ADD_POST': return [...state, action.payload]; default: return state; } }; // Combine slice reducers import { combineReducers } from 'redux'; const rootReducer = combineReducers({ user: userReducer, posts: postsReducer, }); // Usage const store = createStore(rootReducer);

32. What is the significance of immutability in reducer functions?

Answer:

Immutability in reducer functions ensures that the state is not mutated directly. Instead, a new state object is created with the necessary changes. This is important because:

Predictability: It ensures that the state changes are predictable and can be tracked.
Debugging: Makes debugging easier because you can compare previous and current states.
Performance: Helps with performance optimizations, as immutable data structures enable efficient change detection.

Example:

const initialState = { count: 0 }; const counterReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; default: return state; } };

33. How do you handle initial state in Redux reducers?

Answer:

The initial state in Redux reducers is defined as the default value of the state parameter in the reducer function.

Example:

const initialState = { count: 0 }; const counterReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; default: return state; } };

34. What are common pitfalls when writing reducers?

Answer:

Mutating State Directly: Always return a new state object instead of mutating the existing state.

 // Incorrect state.count += 1; return state; // Correct return { ...state, count: state.count + 1 };

Handling Side Effects: Reducers should be pure functions and not contain side effects like API calls or logging.

 // Incorrect fetch('/api/data').then(response => response.json()).then(data => { state.data = data; }); // Correct // Handle side effects in action creators or middleware

Not Providing a Default Case: Always provide a default case in the switch statement to return the current state if the action type is not recognized.

 const counterReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; default: return state; } };

Complex State Logic in Reducers: Keep the reducer logic simple and move complex state logic to action creators or middleware.

 // Incorrect const complexReducer = (state = initialState, action) => { if (action.type === 'COMPLEX_ACTION') { // complex logic return newState; } return state; }; // Correct // Handle complex logic in action creators or middleware

Ignoring Immutability: Always ensure that the state is updated immutably.

 // Incorrect state.items.push(action.payload); return state; // Correct return { ...state, items: [...state.items, action.payload] };

Redux Middleware & Side Effects

Let’s address the questions in the image with detailed explanations and code examples related to Redux middleware and side effects.

35. What is `redux-thunk` and how does it work?

Answer:

redux-thunk is a middleware that allows you to write action creators that return a function instead of an action. This function can perform asynchronous operations and dispatch actions based on the results.

How it works:

Install redux-thunk:

 npm install redux-thunk

Configure Store with Thunk Middleware:

 import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; const store = createStore(rootReducer, applyMiddleware(thunk));

Define Asynchronous Action Creator:

 // actions.js import axios from 'axios'; export const fetchData = () => { return async (dispatch) => { try { const response = await axios.get('https://api.example.com/data'); dispatch({ type: 'FETCH_DATA_SUCCESS', payload: response.data }); } catch (error) { dispatch({ type: 'FETCH_DATA_FAILURE', error }); } }; };

Use Asynchronous Action Creator in a Component:

 import { useDispatch } from 'react-redux'; import { useEffect } from 'react'; import { fetchData } from './actions'; const DataFetcher = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(fetchData()); }, [dispatch]); return ( <div> <h1>Data Fetcher</h1> </div> ); }; export default DataFetcher;

36. Can you explain the purpose of `redux-saga` and how it compares to `redux-thunk`?

Answer:

redux-saga is a middleware library that uses generator functions to handle side effects in Redux applications. It provides a more powerful and flexible way to manage complex asynchronous workflows compared to redux-thunk.

Comparison:

redux-thunk:
Simpler and easier to understand.
Action creators return functions.
Suitable for basic asynchronous operations.
redux-saga:
More powerful and suitable for complex asynchronous workflows.
Uses generator functions to handle side effects.
Provides a better way to manage complex flows with multiple steps and dependencies.

How redux-saga works:

Install redux-saga:

 npm install redux-saga

Create a Saga:

 import { call, put, takeEvery } from 'redux-saga/effects'; import axios from 'axios'; function* fetchDataSaga() { try { const response = yield call(axios.get, 'https://api.example.com/data'); yield put({ type: 'FETCH_DATA_SUCCESS', payload: response.data }); } catch (error) { yield put({ type: 'FETCH_DATA_FAILURE', error }); } } function* watchFetchData() { yield takeEvery('FETCH_DATA_REQUEST', fetchDataSaga); } export default watchFetchData;

Configure Store with Saga Middleware:

 import { createStore, applyMiddleware } from 'redux'; import createSagaMiddleware from 'redux-saga'; import rootReducer from './reducers'; import rootSaga from './sagas'; const sagaMiddleware = createSagaMiddleware(); const store = createStore(rootReducer, applyMiddleware(sagaMiddleware)); sagaMiddleware.run(rootSaga);

Use Saga in a Component:

 import { useDispatch } from 'react-redux'; const DataFetcher = () => { const dispatch = useDispatch(); const handleFetchData = () => { dispatch({ type: 'FETCH_DATA_REQUEST' }); }; return ( <div> <button onClick={handleFetchData}>Fetch Data</button> </div> ); }; export default DataFetcher;

37. What is a “side effect” and how do middlewares handle them in Redux?

Answer:

A side effect is any operation that affects something outside the scope of a pure function, such as API calls, logging, accessing browser storage, or dispatching other actions. Middlewares handle side effects by intercepting actions and performing the necessary operations before passing the actions to the reducers.

Example using redux-thunk:

Handle Asynchronous API Call:

 // actions.js import axios from 'axios'; export const fetchData = () => { return async (dispatch) => { try { const response = await axios.get('https://api.example.com/data'); dispatch({ type: 'FETCH_DATA_SUCCESS', payload: response.data }); } catch (error) { dispatch({ type: 'FETCH_DATA_FAILURE', error }); } }; };

Configure Store with Thunk Middleware:

 import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; const store = createStore(rootReducer, applyMiddleware(thunk));

38. How do you write a custom middleware for Redux?

Answer:

A custom middleware is a function that wraps the store’s dispatch method. It can be used to add custom functionality to the dispatching process.

Example:

Create Custom Middleware:

 const loggerMiddleware = (store) => (next) => (action) => { console.log('Dispatching:', action); const result = next(action); console.log('Next state:', store.getState()); return result; };

Configure Store with Custom Middleware:

 import { createStore, applyMiddleware } from 'redux'; import rootReducer from './reducers'; const store = createStore(rootReducer, applyMiddleware(loggerMiddleware));

Usage:

 store.dispatch({ type: 'INCREMENT' });

39. Discuss how middlewares can enhance the capabilities of a Redux store.

Answer:

Middlewares enhance the capabilities of a Redux store by allowing you to:

Handle Asynchronous Actions: Perform asynchronous operations like API calls, and dispatch actions based on the results (e.g., redux-thunk, redux-saga).

 import thunk from 'redux-thunk'; const store = createStore(rootReducer, applyMiddleware(thunk));

Logging and Debugging: Log actions and state changes for easier debugging (e.g., redux-logger).

 import logger from 'redux-logger'; const store = createStore(rootReducer, applyMiddleware(logger));

Error Handling: Catch and handle errors during action dispatches.

 const errorMiddleware = (store) => (next) => (action) => { try { return next(action); } catch (error) { console.error('Caught an exception:', error); } }; const store = createStore(rootReducer, applyMiddleware(errorMiddleware));

Analytics: Send action and state data to analytics services.

 const analyticsMiddleware = (store) => (next) => (action) => { // Send action data to analytics service return next(action); }; const store = createStore(rootReducer, applyMiddleware(analyticsMiddleware));

Conditional Dispatching: Conditionally dispatch actions based on custom logic.

 const conditionalMiddleware = (store) => (next) => (action) => { if (action.type === 'SPECIAL_ACTION') { // Perform custom logic } return next(action); }; const store = createStore(rootReducer, applyMiddleware(conditionalMiddleware));

By leveraging middlewares, you can extend the functionality of the Redux store to meet the specific needs of your application, improve maintainability, and enhance the developer experience.

Redux & UI Integration

40. How do you connect a React component to a Redux store?

Answer:

To connect a React component to a Redux store, you can use the connect function from react-redux or hooks like useDispatch and useSelector.

Using connect:

Create the Redux Store:

 import { createStore } from 'redux'; const initialState = { count: 0 }; const counterReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; default: return state; } }; const store = createStore(counterReducer);

Provider Component:

 import { Provider } from 'react-redux'; import { store } from './store'; import App from './App'; const Root = () => ( <Provider store={store}> <App /> </Provider> ); export default Root;

Connect Component to Store:

 import { connect } from 'react-redux'; const Counter = ({ count, increment, decrement }) => ( <div> <h1>{count}</h1> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </div> ); const mapStateToProps = (state) => ({ count: state.count, }); const mapDispatchToProps = (dispatch) => ({ increment: () => dispatch({ type: 'INCREMENT' }), decrement: () => dispatch({ type: 'DECREMENT' }), }); export default connect(mapStateToProps, mapDispatchToProps)(Counter);

41. What are the advantages of using React-Redux’s `connect` function?

Answer:

Separation of Concerns: Separates the data fetching and state management logic from the UI components.
Automatic Updates: Automatically subscribes to the store updates and re-renders the component when the relevant part of the state changes.
Performance Optimization: Provides a way to optimize re-renders by using mapStateToProps and mapDispatchToProps.
Declarative Data Fetching: Allows components to declaratively specify the data they need from the store.

42. Can you describe the `mapStateToProps` and `mapDispatchToProps` functions?

Answer:

mapStateToProps: Maps the state from the Redux store to the props of the component.

 const mapStateToProps = (state) => ({ count: state.count, });

mapDispatchToProps: Maps the dispatch function to the props of the component, allowing the component to dispatch actions.

 const mapDispatchToProps = (dispatch) => ({ increment: () => dispatch({ type: 'INCREMENT' }), decrement: () => dispatch({ type: 'DECREMENT' }), });

43. Explain the `Provider` component from React-Redux.

Answer:

The Provider component makes the Redux store available to any nested components that need to access the Redux store. It should wrap the root component of the application.

Example:

import { Provider } from 'react-redux'; import { store } from './store'; import App from './App'; const Root = () => ( <Provider store={store}> <App /> </Provider> ); export default Root;

44. How do you use hooks like `useDispatch` and `useSelector` in React functional components?

Answer:

useDispatch and useSelector are hooks provided by react-redux for accessing the Redux store in functional components.

Example:

Using useDispatch to Dispatch Actions:

 import { useDispatch } from 'react-redux'; const Counter = () => { const dispatch = useDispatch(); return ( <div> <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button> <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button> </div> ); };

Using useSelector to Select State:

 import { useSelector } from 'react-redux'; const Counter = () => { const count = useSelector((state) => state.count); return ( <div> <h1>{count}</h1> </div> ); };

45. What performance considerations should be taken into account when connecting components to Redux?

Answer:

Avoid Over-Rendering: Ensure components only re-render when necessary. Use mapStateToProps to select only the necessary parts of the state.
Memoization: Use memoized selectors with libraries like reselect to avoid recomputations.
Component Hierarchy: Connect higher-level components to Redux to minimize the number of connected components.
Batching Updates: Use middleware to batch actions and reduce the number of renders.

46. How can you optimize the performance of Redux-connected components?

Answer:

Use Memoized Selectors: Use reselect to create memoized selectors.

 import { createSelector } from 'reselect'; const selectCount = (state) => state.count; const getCount = createSelector([selectCount], (count) => count);

Optimize mapStateToProps: Ensure mapStateToProps only selects the necessary state.

 const mapStateToProps = (state) => ({ count: state.count, });

Use React.memo: Use React.memo to prevent unnecessary re-renders.

 import React from 'react'; const Counter = React.memo(({ count, increment, decrement }) => ( <div> <h1>{count}</h1> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </div> ));

Split Reducers: Use combineReducers to split reducers and manage state more efficiently.

 import { combineReducers } from 'redux'; const rootReducer = combineReducers({ counter: counterReducer, user: userReducer, });

These detailed explanations and code examples should provide a comprehensive understanding of Redux and UI integration.

Advanced Redux Patterns

47. What are Higher Order Reducers (HORs) and how are they used?

Answer:

Higher Order Reducers (HORs) are functions that take a reducer as an argument and return a new reducer with enhanced behavior. HORs allow you to add reusable functionality to your reducers.

Example:

Logger HOR: Adds logging functionality to any reducer.

 const logger = (reducer) => (state, action) => { console.log('Previous State:', state); console.log('Action:', action); const newState = reducer(state, action); console.log('Next State:', newState); return newState; }; const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }; const enhancedReducer = logger(counterReducer); // Usage const store = createStore(enhancedReducer);

48. Can you implement a feature toggle mechanism using Redux?

Answer:

A feature toggle mechanism allows you to enable or disable features dynamically based on the application state. This can be achieved using Redux by managing feature flags in the state.

Example:

Define Feature Flags in State:

 const initialState = { featureFlags: { newFeature: false, }, }; const featureReducer = (state = initialState, action) => { switch (action.type) { case 'TOGGLE_FEATURE': return { ...state, featureFlags: { ...state.featureFlags, [action.payload.feature]: action.payload.enabled, }, }; default: return state; } };

Action to Toggle Feature:

 const toggleFeature = (feature, enabled) => ({ type: 'TOGGLE_FEATURE', payload: { feature, enabled }, });

Use Feature Toggle in Component:

 import { useSelector, useDispatch } from 'react-redux'; const FeatureComponent = () => { const dispatch = useDispatch(); const isNewFeatureEnabled = useSelector((state) => state.featureFlags.newFeature); return ( <div> <button onClick={() => dispatch(toggleFeature('newFeature', !isNewFeatureEnabled))}> Toggle New Feature </button> {isNewFeatureEnabled && <div>New Feature Content</div>} </div> ); };

49. How do you normalize a state shape in Redux?

Answer:

Normalizing a state shape involves restructuring the state to store data in a flat, relational format. This helps in managing complex state, avoiding data duplication, and improving performance.

Example:

Initial Unnormalized State:

 const initialState = { posts: [ { id: 1, title: 'Post 1', comments: [{ id: 1, text: 'Comment 1' }] }, { id: 2, title: 'Post 2', comments: [{ id: 2, text: 'Comment 2' }] }, ], };

Normalized State:

 const initialState = { posts: [1, 2], entities: { posts: { 1: { id: 1, title: 'Post 1', comments: [1] }, 2: { id: 2, title: 'Post 2', comments: [2] }, }, comments: { 1: { id: 1, text: 'Comment 1' }, 2: { id: 2, text: 'Comment 2' }, }, }, };

Reducer Handling Normalized State:

 const rootReducer = (state = initialState, action) => { switch (action.type) { case 'ADD_POST': return { ...state, posts: [...state.posts, action.payload.id], entities: { ...state.entities, posts: { ...state.entities.posts, [action.payload.id]: action.payload, }, }, }; default: return state; } };

50. What is a Redux “slice” and how is it used?

Answer:

A Redux slice represents a single piece of the Redux state and its associated reducers and actions. Slices help in organizing the Redux state and logic into manageable parts.

Example Using Redux Toolkit:

Create a Slice:

 import { createSlice } from '@reduxjs/toolkit'; const counterSlice = createSlice({ name: 'counter', initialState: { count: 0 }, reducers: { increment: (state) => { state.count += 1; }, decrement: (state) => { state.count -= 1; }, }, }); export const { increment, decrement } = counterSlice.actions; export default counterSlice.reducer;

Combine Slices into the Root Reducer:

 import { configureStore } from '@reduxjs/toolkit'; import counterReducer from './counterSlice'; const store = configureStore({ reducer: { counter: counterReducer, }, }); export default store;

Use Slice in a Component:

 import { useSelector, useDispatch } from 'react-redux'; import { increment, decrement } from './counterSlice'; const CounterComponent = () => { const count = useSelector((state) => state.counter.count); const dispatch = useDispatch(); return ( <div> <h1>{count}</h1> <button onClick={() => dispatch(increment())}>Increment</button> <button onClick={() => dispatch(decrement())}>Decrement</button> </div> ); }; export default CounterComponent;

51. Explain the “Ducks” pattern in Redux.

Answer:

The Ducks pattern is a way to organize Redux code by collocating actions, action types, and reducers into a single file for each feature. This helps in maintaining modularity and avoiding the scattering of related logic across multiple files.

Example:

Define a Duck:

 // counterDuck.js const INCREMENT = 'counter/INCREMENT'; const DECREMENT = 'counter/DECREMENT'; export const increment = () => ({ type: INCREMENT }); export const decrement = () => ({ type: DECREMENT }); const initialState = { count: 0 }; const counterReducer = (state = initialState, action) => { switch (action.type) { case INCREMENT: return { ...state, count: state.count + 1 }; case DECREMENT: return { ...state, count: state.count - 1 }; default: return state; } }; export default counterReducer;

Combine Ducks into the Root Reducer:

 import { combineReducers, createStore } from 'redux'; import counterReducer from './counterDuck'; const rootReducer = combineReducers({ counter: counterReducer, }); const store = createStore(rootReducer); export default store;

Use Duck in a Component:

 import { useSelector, useDispatch } from 'react-redux'; import { increment, decrement } from './counterDuck'; const CounterComponent = () => { const count = useSelector((state) => state.counter.count); const dispatch = useDispatch(); return ( <div> <h1>{count}</h1> <button onClick={() => dispatch(increment())}>Increment</button> <button onClick={() => dispatch(decrement())}>Decrement</button> </div> ); }; export default CounterComponent;

These detailed explanations and code examples should provide a comprehensive understanding of advanced Redux concepts.

Redux State Normalization

Let’s address the questions in the image with detailed explanations and code examples related to Redux state normalization.

52. Why is state normalization recommended in Redux?

Answer:

State normalization is recommended in Redux because it:

Reduces Data Redundancy: Normalizing state ensures that each piece of data is stored in one place, reducing duplication and making updates easier.
Improves Performance: With a normalized state, accessing and updating specific pieces of data is faster and more efficient.
Simplifies State Management: A normalized state structure makes it easier to manage complex state relationships and perform operations like adding, updating, or deleting entities.
Enhances Data Consistency: By storing data in a normalized form, you ensure consistency across the application, as changes to an entity reflect in all places where the entity is used.

53. How do you structure a normalized state?

Answer:

A normalized state is structured to store data in a flat, relational format, similar to a database. Each entity type is stored in its own collection, and relationships between entities are represented using IDs.

Example:

Initial Unnormalized State:

 const state = { posts: [ { id: 1, title: 'Post 1', comments: [ { id: 1, text: 'Comment 1' }, { id: 2, text: 'Comment 2' }, ], }, { id: 2, title: 'Post 2', comments: [ { id: 3, text: 'Comment 3' }, ], }, ], };

Normalized State:

 const normalizedState = { posts: [1, 2], entities: { posts: { 1: { id: 1, title: 'Post 1', comments: [1, 2] }, 2: { id: 2, title: 'Post 2', comments: [3] }, }, comments: { 1: { id: 1, text: 'Comment 1' }, 2: { id: 2, text: 'Comment 2' }, 3: { id: 3, text: 'Comment 3' }, }, }, };

54. What are the benefits of state denormalization?

Answer:

State denormalization involves embedding related data directly within each entity, which can be beneficial for:

Simplified Data Access: Denormalized state makes it easier to access nested data directly without additional lookups.
Improved Read Performance: Denormalized state can improve read performance for certain use cases by reducing the need to join or merge data from different parts of the state.
Reduced Complexity: For some simple applications, denormalized state can reduce the complexity of managing relations between entities.

However, it comes with trade-offs, such as potential data redundancy and increased difficulty in maintaining consistency.

55. Can you explain how to manage entity relations in a normalized Redux state?

Answer:

In a normalized Redux state, entity relations are managed using IDs to reference related entities. Selectors and utility functions are used to assemble and access related data.

Example:

Normalized State:

 const normalizedState = { posts: [1, 2], entities: { posts: { 1: { id: 1, title: 'Post 1', comments: [1, 2] }, 2: { id: 2, title: 'Post 2', comments: [3] }, }, comments: { 1: { id: 1, text: 'Comment 1' }, 2: { id: 2, text: 'Comment 2' }, 3: { id: 3, text: 'Comment 3' }, }, }, };

Selectors to Access Related Data:

 import { createSelector } from 'reselect'; const selectPostById = (state, postId) => state.entities.posts[postId]; const selectCommentsByIds = (state, commentIds) => commentIds.map(id => state.entities.comments[id]); const selectPostWithComments = createSelector( [selectPostById, (state, postId) => selectCommentsByIds(state, state.entities.posts[postId].comments)], (post, comments) => ({ ...post, comments, }) ); // Usage in a component const mapStateToProps = (state, ownProps) => ({ post: selectPostWithComments(state, ownProps.postId), }); const PostComponent = ({ post }) => ( <div> <h1>{post.title}</h1> <ul> {post.comments.map(comment => ( <li key={comment.id}>{comment.text}</li> ))} </ul> </div> ); export default connect(mapStateToProps)(PostComponent);

These detailed explanations and code examples should provide a comprehensive understanding of Redux state normalization.

Redux Ecosystem & Utilities

56. What is Immutable.js and how can it be used with Redux?

Answer:

Immutable.js is a library that provides immutable data structures, which helps in managing immutable state in Redux. Immutable.js collections are efficient and provide a richer API for managing state compared to plain JavaScript objects and arrays.

Usage with Redux:

Install Immutable.js:

 npm install immutable

Define Immutable State:

 import { Map, List } from 'immutable'; const initialState = Map({ count: 0, items: List(), }); const counterReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return state.update('count', count => count + 1); case 'ADD_ITEM': return state.update('items', items => items.push(action.payload)); default: return state; } };

Access Immutable State in Components:

 import { useSelector, useDispatch } from 'react-redux'; const CounterComponent = () => { const count = useSelector(state => state.get('count')); const items = useSelector(state => state.get('items')); const dispatch = useDispatch(); return ( <div> <h1>{count}</h1> <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button> <button onClick={() => dispatch({ type: 'ADD_ITEM', payload: 'New Item' })}>Add Item</button> <ul> {items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> </div> ); }; export default CounterComponent;

57. Discuss the Redux DevTools extension and its features.

Answer:

The Redux DevTools extension is a powerful tool for debugging Redux applications. It provides several features that help developers inspect and debug the state and actions in their Redux store.

Features:

Action Tracking: View the list of dispatched actions and their payloads.
State Inspection: Inspect the current state of the Redux store and how it changes over time.
Time Travel: Revert to previous states by stepping through the history of dispatched actions.
Action Replay: Replay actions to reproduce bugs or verify fixes.
Import/Export: Save the state and actions to a file and load them later for debugging.
Traceable Actions: View stack traces for actions to understand where they were dispatched.

Usage:

Install Redux DevTools Extension:

Install the browser extension from the Chrome Web Store or Firefox Add-ons.

Configure Redux Store:

 import { createStore } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import rootReducer from './reducers'; const store = createStore(rootReducer, composeWithDevTools()); export default store;

58. How do `reselect` and memoized selectors work in Redux?

Answer:

reselect is a library for creating memoized selectors that compute derived state. Memoized selectors only recompute when their input arguments change, which improves performance by avoiding unnecessary recalculations.

Usage:

Install reselect:

 npm install reselect

Create Memoized Selectors:

 import { createSelector } from 'reselect'; // Input selectors const selectCount = (state) => state.count; const selectItems = (state) => state.items; // Memoized selector const selectCountWithItems = createSelector( [selectCount, selectItems], (count, items) => ({ count, items, }) ); // Usage in a component import { useSelector } from 'react-redux'; const CounterComponent = () => { const data = useSelector(selectCountWithItems); return ( <div> <h1>{data.count}</h1> <ul> {data.items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> </div> ); }; export default CounterComponent;

59. What are common utilities and libraries used in conjunction with Redux?

Answer:

redux-thunk: Middleware for handling asynchronous actions by allowing action creators to return functions.

 npm install redux-thunk

redux-saga: Middleware for handling side effects using generator functions.

 npm install redux-saga

reselect: Library for creating memoized selectors.

 npm install reselect

redux-devtools-extension: Enhances Redux debugging capabilities with the Redux DevTools.

 npm install redux-devtools-extension

immutable: Library for immutable data structures.

 npm install immutable

redux-logger: Middleware for logging actions and state changes.

 npm install redux-logger

60. Describe the significance of the Redux Toolkit and how it helps Redux development.

Answer:

The Redux Toolkit is an official, opinionated set of tools and best practices for efficient Redux development. It simplifies the process of writing Redux logic and provides utilities that make Redux easier to use.

Key Features:

Simplified Configuration: configureStore sets up the Redux store with good defaults, including middleware and Redux DevTools integration.

 import { configureStore } from '@reduxjs/toolkit'; import rootReducer from './reducers'; const store = configureStore({ reducer: rootReducer, }); export default store;

createSlice: Combines reducers, actions, and initial state into a single slice of state.

 import { createSlice } from '@reduxjs/toolkit'; const counterSlice = createSlice({ name: 'counter', initialState: { count: 0 }, reducers: { increment: (state) => { state.count += 1; }, decrement: (state) => { state.count -= 1; }, }, }); export const { increment, decrement } = counterSlice.actions; export default counterSlice.reducer;

Immutable Updates: Uses Immer under the hood to allow writing mutable-looking update logic that produces immutable state.

 const counterSlice = createSlice({ name: 'counter', initialState: { count: 0 }, reducers: { increment: (state) => { state.count += 1; }, decrement: (state) => { state.count -= 1; }, }, });

Built-in Middleware: Automatically includes redux-thunk and allows easy integration of additional middleware.

 const store = configureStore({ reducer: rootReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger), });

DevTools Integration: Automatically integrates with Redux DevTools for enhanced debugging.

By using Redux Toolkit, developers can reduce boilerplate code, follow best practices, and build more maintainable and efficient Redux applications.

These detailed explanations and code examples should provide a comprehensive understanding of the Redux ecosystem and utilities

Testing Redux Applications

Let’s address the questions in the image with detailed explanations and code examples related to testing Redux applications.

61. How do you test Redux reducers?

Answer:

Testing Redux reducers involves ensuring that they produce the correct new state based on the given actions and initial state.

Example:

Reducer Definition:

 const initialState = { count: 0 }; const counterReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; default: return state; } }; export default counterReducer;

Testing the Reducer:

 import counterReducer from './counterReducer'; describe('counterReducer', () => { it('should return the initial state', () => { expect(counterReducer(undefined, {})).toEqual({ count: 0 }); }); it('should handle INCREMENT', () => { expect(counterReducer({ count: 0 }, { type: 'INCREMENT' })).toEqual({ count: 1 }); }); it('should handle DECREMENT', () => { expect(counterReducer({ count: 1 }, { type: 'DECREMENT' })).toEqual({ count: 0 }); }); });

62. What is the recommended approach to test Redux actions?

Answer:

Testing Redux actions involves ensuring that the action creators return the correct action objects.

Example:

Action Creators:

 export const increment = () => ({ type: 'INCREMENT', }); export const decrement = () => ({ type: 'DECREMENT', });

Testing the Action Creators:

 import { increment, decrement } from './actions'; describe('actions', () => { it('should create an action to increment', () => { const expectedAction = { type: 'INCREMENT' }; expect(increment()).toEqual(expectedAction); }); it('should create an action to decrement', () => { const expectedAction = { type: 'DECREMENT' }; expect(decrement()).toEqual(expectedAction); }); });

63. How can you test a Redux-connected React component?

Answer:

Testing a Redux-connected React component involves rendering the component with a Redux store using the Provider from react-redux and asserting that it behaves correctly.

Example:

Connected Component:

 import React from 'react'; import { connect } from 'react-redux'; import { increment, decrement } from './actions'; const Counter = ({ count, increment, decrement }) => ( <div> <h1>{count}</h1> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </div> ); const mapStateToProps = (state) => ({ count: state.count, }); const mapDispatchToProps = { increment, decrement, }; export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Testing the Connected Component:

 import React from 'react'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; import { render, fireEvent } from '@testing-library/react'; import counterReducer from './counterReducer'; import Counter from './Counter'; const renderWithRedux = ( component, { initialState, store = createStore(counterReducer, initialState) } = {} ) => ({ ...render(<Provider store={store}>{component}</Provider>), store, }); test('can render with redux with defaults', () => { const { getByText } = renderWithRedux(<Counter />); expect(getByText('0')).toBeInTheDocument(); }); test('can increment the counter', () => { const { getByText } = renderWithRedux(<Counter />, { initialState: { count: 0 } }); fireEvent.click(getByText('Increment')); expect(getByText('1')).toBeInTheDocument(); }); test('can decrement the counter', () => { const { getByText } = renderWithRedux(<Counter />, { initialState: { count: 1 } }); fireEvent.click(getByText('Decrement')); expect(getByText('0')).toBeInTheDocument(); });

64. Describe the process of testing asynchronous action creators.

Answer:

Testing asynchronous action creators involves using middleware like redux-thunk to handle the asynchronous logic and mocking the asynchronous calls.

Example:

Asynchronous Action Creator:

 import axios from 'axios'; export const fetchData = () => { return async (dispatch) => { dispatch({ type: 'FETCH_DATA_REQUEST' }); try { const response = await axios.get('/api/data'); dispatch({ type: 'FETCH_DATA_SUCCESS', payload: response.data }); } catch (error) { dispatch({ type: 'FETCH_DATA_FAILURE', error }); } }; };

Testing the Asynchronous Action Creator:

 import configureMockStore from 'redux-mock-store'; import thunk from 'redux-thunk'; import axios from 'axios'; import { fetchData } from './actions'; const middlewares = [thunk]; const mockStore = configureMockStore(middlewares); jest.mock('axios'); describe('fetchData actions', () => { it('creates FETCH_DATA_SUCCESS when fetching data has been done', () => { const data = { data: 'sample data' }; axios.get.mockResolvedValue({ data }); const expectedActions = [ { type: 'FETCH_DATA_REQUEST' }, { type: 'FETCH_DATA_SUCCESS', payload: data }, ]; const store = mockStore({}); return store.dispatch(fetchData()).then(() => { expect(store.getActions()).toEqual(expectedActions); }); }); it('creates FETCH_DATA_FAILURE when fetching data fails', () => { const error = new Error('Network Error'); axios.get.mockRejectedValue(error); const expectedActions = [ { type: 'FETCH_DATA_REQUEST' }, { type: 'FETCH_DATA_FAILURE', error }, ]; const store = mockStore({}); return store.dispatch(fetchData()).then(() => { expect(store.getActions()).toEqual(expectedActions); }); }); });

65. What tools can you use to facilitate testing in Redux applications?

Answer:

Several tools can facilitate testing in Redux applications:

Jest: A testing framework by Facebook that includes features for running tests and generating coverage reports.

 npm install --save-dev jest

redux-mock-store: A mock store for testing Redux async action creators and middleware.

 npm install --save-dev redux-mock-store

redux-saga-test-plan: A library for testing Redux Saga.

 npm install --save-dev redux-saga-test-plan

@testing-library/react: A library for testing React components.

 npm install --save-dev @testing-library/react

nock: A library for mocking HTTP requests.

 npm install --save-dev nock

By using these tools, you can ensure comprehensive and effective testing of your Redux applications

Scaling Redux for Large Applications

Let’s address the questions in the image with detailed explanations and code examples related to organizing and scaling Redux in large applications, and managing complex state.

70. How do you organize your files and folders in a large Redux application?

Answer:

In a large Redux application, organizing files and folders in a structured manner is crucial for maintainability and scalability. A common approach is to follow a feature-based structure.

Example Directory Structure:

src/ ├── components/ │ ├── Button.js │ ├── Header.js ├── features/ │ ├── counter/ │ │ ├── counterSlice.js │ │ ├── Counter.js │ │ ├── Counter.test.js │ ├── user/ │ │ ├── userSlice.js │ │ ├── User.js │ │ ├── User.test.js ├── app/ │ ├── store.js │ ├── rootReducer.js ├── services/ │ ├── api.js ├── utils/ │ ├── helpers.js ├── App.js ├── index.js

71. What strategies can be used to scale Redux actions and reducers?

Answer:

To scale Redux actions and reducers, consider the following strategies:

Feature-Based Slices: Use Redux Toolkit to create slices for different features.

 // features/counter/counterSlice.js import { createSlice } from '@reduxjs/toolkit'; const counterSlice = createSlice({ name: 'counter', initialState: { count: 0 }, reducers: { increment: (state) => { state.count += 1; }, decrement: (state) => { state.count -= 1; }, }, }); export const { increment, decrement } = counterSlice.actions; export default counterSlice.reducer;

Combine Reducers: Use combineReducers to manage multiple slices.

 // app/rootReducer.js import { combineReducers } from 'redux'; import counterReducer from '../features/counter/counterSlice'; import userReducer from '../features/user/userSlice'; const rootReducer = combineReducers({ counter: counterReducer, user: userReducer, }); export default rootReducer;

Modular Actions: Organize actions by feature or domain.

 // features/counter/counterActions.js export const increment = () => ({ type: 'INCREMENT', }); export const decrement = () => ({ type: 'DECREMENT', });

72. Can you explain the concept of “domain-driven design” in the context of a Redux state tree?

Answer:

Domain-Driven Design (DDD) in Redux involves structuring your state and logic around the core business domains of the application. This approach helps to create a clear and maintainable architecture by grouping related actions, reducers, and state together.

Example:

Define Domains: Identify the main domains of your application.

 src/ ├── features/ │ ├── counter/ │ │ ├── counterSlice.js │ │ ├── Counter.js │ │ ├── Counter.test.js │ ├── user/ │ │ ├── userSlice.js │ │ ├── User.js │ │ ├── User.test.js

Domain-Specific State: Each domain manages its own state and logic.

 // features/user/userSlice.js import { createSlice } from '@reduxjs/toolkit'; const userSlice = createSlice({ name: 'user', initialState: { name: '', age: 0 }, reducers: { setName: (state, action) => { state.name = action.payload; }, setAge: (state, action) => { state.age = action.payload; }, }, }); export const { setName, setAge } = userSlice.actions; export default userSlice.reducer;

73. How do feature modules and code splitting affect Redux state management?

Answer:

Feature Modules and Code Splitting allow you to load parts of your application dynamically. This can improve performance by reducing the initial load time and helps in organizing your application.

Example:

Dynamic Imports for Code Splitting:

 import { lazy, Suspense } from 'react'; const Counter = lazy(() => import('../features/counter/Counter')); const App = () => ( <Suspense fallback={<div>Loading...</div>}> <Counter /> </Suspense> );

Dynamic Reducer Injection:

 import { combineReducers } from 'redux'; const createRootReducer = (asyncReducers) => combineReducers({ ...asyncReducers, }); const store = createStore( createRootReducer(), applyMiddleware(...middlewares) ); store.asyncReducers = {}; export const injectReducer = (key, reducer) => { store.asyncReducers[key] = reducer; store.replaceReducer(createRootReducer(store.asyncReducers)); };

74. Discuss strategies for managing complex application state with Redux.

Answer:

Normalization: Normalize state to avoid nested structures and make it easier to update.

 const initialState = { posts: [1, 2], entities: { posts: { 1: { id: 1, title: 'Post 1', comments: [1, 2] }, 2: { id: 2, title: 'Post 2', comments: [3] }, }, comments: { 1: { id: 1, text: 'Comment 1' }, 2: { id: 2, text: 'Comment 2' }, 3: { id: 3, text: 'Comment 3' }, }, }, };

Selectors and Reselect: Use selectors to access state and reselect for memoization.

 import { createSelector } from 'reselect'; const selectPosts = (state) => state.entities.posts; const selectComments = (state) => state.entities.comments; const selectPostWithComments = createSelector( [selectPosts, selectComments, (state, postId) => postId], (posts, comments, postId) => ({ ...posts[postId], comments: posts[postId].comments.map((id) => comments[id]), }) );

Middleware for Side Effects: Use middleware like redux-thunk or redux-saga to handle asynchronous actions.

 // redux-thunk import thunk from 'redux-thunk'; const store = createStore(rootReducer, applyMiddleware(thunk));

Modularize State Management: Use feature-based slices with Redux Toolkit.

 import { configureStore } from '@reduxjs/toolkit'; import counterReducer from '../features/counter/counterSlice'; const store = configureStore({ reducer: { counter: counterReducer, }, }); export default store;

These detailed explanations and code examples should provide a comprehensive understanding of organizing and scaling Redux in large applications, and managing complex state

Redux Performance Optimization

Let’s address the questions in the image with detailed explanations and code examples related to optimizing Redux in a React Native application.

75. How do you prevent unnecessary renders in Redux-connected components?

Answer:

To prevent unnecessary renders in Redux-connected components, you can use the following techniques:

Memoization with React.memo: Use React.memo to memoize functional components, preventing them from re-rendering unless their props change.

 import React from 'react'; const Counter = React.memo(({ count, increment }) => ( <div> <h1>{count}</h1> <button onClick={increment}>Increment</button> </div> )); export default Counter;

Using connect Optimally: Use the connect function from react-redux to map only the necessary state and actions to props.

 import { connect } from 'react-redux'; import { increment } from './actions'; const Counter = ({ count, increment }) => ( <div> <h1>{count}</h1> <button onClick={increment}>Increment</button> </div> ); const mapStateToProps = (state) => ({ count: state.counter.count, }); export default connect(mapStateToProps, { increment })(Counter);

Using useSelector with Memoized Selectors: Use useSelector with memoized selectors from reselect to ensure components only re-render when necessary.

 import { useSelector, useDispatch } from 'react-redux'; import { createSelector } from 'reselect'; import { increment } from './actions'; const selectCount = createSelector( (state) => state.counter.count, (count) => count ); const Counter = () => { const count = useSelector(selectCount); const dispatch = useDispatch(); return ( <div> <h1>{count}</h1> <button onClick={() => dispatch(increment())}>Increment</button> </div> ); }; export default Counter;

76. What techniques are available to reduce the size of the Redux store?

Answer:

Normalization: Normalize the state to avoid redundant data.

 const initialState = { posts: [1, 2], entities: { posts: { 1: { id: 1, title: 'Post 1', comments: [1, 2] }, 2: { id: 2, title: 'Post 2', comments: [3] }, }, comments: { 1: { id: 1, text: 'Comment 1' }, 2: { id: 2, text: 'Comment 2' }, 3: { id: 3, text: 'Comment 3' }, }, }, };

Pagination and Infinite Scroll: Load data incrementally using pagination or infinite scroll.

 const initialState = { items: [], currentPage: 0, totalPages: 0, }; const loadMoreItems = (state, action) => ({ ...state, items: [...state.items, ...action.payload.items], currentPage: action.payload.currentPage, totalPages: action.payload.totalPages, });

Remove Stale Data: Implement logic to remove or archive stale data from the store.

 const cleanUpOldData = (state) => ({ ...state, items: state.items.filter(item => item.isRecent), });

77. How do you optimize Redux action dispatch and payload size?

Answer:

Batching Actions: Use batching to combine multiple actions into a single dispatch.

 const batchActions = (actions) => (dispatch) => { actions.forEach((action) => dispatch(action)); }; store.dispatch(batchActions([action1, action2]));

Throttling and Debouncing: Use throttling or debouncing to limit the frequency of action dispatches.

 import { debounce } from 'lodash'; const fetchData = (query) => (dispatch) => { debounce(() => { dispatch({ type: 'FETCH_DATA_REQUEST', payload: query }); }, 300); };

Minimal Payloads: Ensure that the payload of actions contains only necessary data.

 const updateUserProfile = (userId, profileData) => ({ type: 'UPDATE_PROFILE', payload: { userId, profileData }, });

78. What are best practices for ensuring a scalable Redux state management with large datasets or frequent updates?

Answer:

Normalization: Normalize the state to avoid deeply nested structures.

 const initialState = { posts: [1, 2], entities: { posts: { 1: { id: 1, title: 'Post 1', comments: [1, 2] }, 2: { id: 2, title: 'Post 2', comments: [3] }, }, comments: { 1: { id: 1, text: 'Comment 1' }, 2: { id: 2, text: 'Comment 2' }, 3: { id: 3, text: 'Comment 3' }, }, }, };

Lazy Loading: Load data incrementally as needed.

 const loadPosts = (page) => async (dispatch) => { const response = await fetch(`/api/posts?page=${page}`); const data = await response.json(); dispatch({ type: 'LOAD_POSTS', payload: data }); };

Memoized Selectors: Use memoized selectors with reselect to optimize state selection.

 import { createSelector } from 'reselect'; const selectPosts = createSelector( (state) => state.entities.posts, (posts) => posts );

Efficient Updates: Update state immutably and efficiently.

 const updatePost = (state, action) => ({ ...state, entities: { ...state.entities, posts: { ...state.entities.posts, [action.payload.id]: action.payload, }, }, });

Middleware for Side Effects: Use middleware like redux-thunk or redux-saga for handling side effects and async operations.

 const store = createStore(rootReducer, applyMiddleware(thunk));

Modular State Management: Use feature-based slices with Redux Toolkit for better organization and scalability.

 import { configureStore } from '@reduxjs/toolkit'; import counterReducer from '../features/counter/counterSlice'; const store = configureStore({ reducer: { counter: counterReducer, }, }); export default store;

These detailed explanations and code examples should provide a comprehensive understanding of optimizing Redux in a React Native application.

Redux Forms & Redux Authentication

79. How do you manage form state with Redux?

Answer:

Managing form state with Redux involves creating actions and reducers to handle form input changes, validations, and submissions.

Example:

Actions:

 export const updateForm = (field, value) => ({ type: 'UPDATE_FORM', payload: { field, value }, }); export const submitForm = () => ({ type: 'SUBMIT_FORM', });

Reducer:

 const initialState = { formData: { name: '', email: '', }, errors: {}, }; const formReducer = (state = initialState, action) => { switch (action.type) { case 'UPDATE_FORM': return { ...state, formData: { ...state.formData, [action.payload.field]: action.payload.value, }, }; case 'SUBMIT_FORM': // Add form validation and submission logic here return state; default: return state; } }; export default formReducer;

Component:

 import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { updateForm, submitForm } from './formActions'; const FormComponent = () => { const dispatch = useDispatch(); const formData = useSelector((state) => state.form.formData); const handleChange = (e) => { const { name, value } = e.target; dispatch(updateForm(name, value)); }; const handleSubmit = (e) => { e.preventDefault(); dispatch(submitForm()); }; return ( <form onSubmit={handleSubmit}> <input type="text" name="name" value={formData.name} onChange={handleChange} /> <input type="email" name="email" value={formData.email} onChange={handleChange} /> <button type="submit">Submit</button> </form> ); }; export default FormComponent;

80. Discuss the use of libraries like Redux Form or React Final Form with Redux.

Answer:

Redux Form and React Final Form are libraries designed to handle form state management with Redux, providing a more structured and feature-rich approach compared to manually managing form state.

Redux Form:

Integrates deeply with Redux.
Automatically manages form state in Redux.
Provides built-in validation, submission, and field-level components.
Suitable for complex forms with extensive state management needs.

React Final Form:

A lightweight alternative to Redux Form.
Less coupled to Redux, allowing more flexibility.
Uses render props for form state and validation management.
Ideal for simpler forms or when minimizing Redux state size is important.

Example with React Final Form:

import React from 'react'; import { Form, Field } from 'react-final-form'; const MyForm = () => ( <Form onSubmit={formValues => { console.log('Form submitted:', formValues); }} render={({ handleSubmit }) => ( <form onSubmit={handleSubmit}> <Field name="name"> {({ input, meta }) => ( <div> <label>Name</label> <input {...input} type="text" placeholder="Name" /> {meta.touched && meta.error && <span>{meta.error}</span>} </div> )} </Field> <Field name="email"> {({ input, meta }) => ( <div> <label>Email</label> <input {...input} type="email" placeholder="Email" /> {meta.touched && meta.error && <span>{meta.error}</span>} </div> )} </Field> <button type="submit">Submit</button> </form> )} /> ); export default MyForm;

81. What are the trade-offs of keeping form state in the Redux store?

Answer:

Pros:

Centralized State Management: Form state is managed centrally in the Redux store, providing consistency and easier debugging.
Persistence: Form state can be persisted across navigation or page reloads.
Sharing State: Form state can be easily accessed and modified by other parts of the application.

Cons:

Performance: Keeping large or complex form states in Redux can lead to performance issues due to frequent state updates and re-renders.
Complexity: Managing form state in Redux can add complexity, especially for simple forms that don’t require global state management.
Boilerplate: Requires additional boilerplate code for actions, reducers, and selectors.

82. How do you manage user authentication and session state in Redux?

Answer:

Managing user authentication and session state in Redux involves storing authentication tokens, user information, and session expiration details in the Redux store.

Example:

Actions:

 export const loginSuccess = (user, token) => ({ type: 'LOGIN_SUCCESS', payload: { user, token }, }); export const logout = () => ({ type: 'LOGOUT', });

Reducer:

 const initialState = { user: null, token: null, isAuthenticated: false, }; const authReducer = (state = initialState, action) => { switch (action.type) { case 'LOGIN_SUCCESS': return { ...state, user: action.payload.user, token: action.payload.token, isAuthenticated: true, }; case 'LOGOUT': return { ...state, user: null, token: null, isAuthenticated: false, }; default: return state; } }; export default authReducer;

Component:

 import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { loginSuccess, logout } from './authActions'; const AuthComponent = () => { const dispatch = useDispatch(); const isAuthenticated = useSelector((state) => state.auth.isAuthenticated); const handleLogin = () => { // Perform login logic, then dispatch success action const user = { id: 1, name: 'John Doe' }; const token = 'some-auth-token'; dispatch(loginSuccess(user, token)); }; const handleLogout = () => { dispatch(logout()); }; return ( <div> {isAuthenticated ? ( <button onClick={handleLogout}>Logout</button> ) : ( <button onClick={handleLogin}>Login</button> )} </div> ); }; export default AuthComponent;

83. What considerations should be made for security when storing tokens or sensitive information in Redux?

Answer:

Avoid Storing Sensitive Data: Avoid storing sensitive data (e.g., passwords) in the Redux store.
Use Secure Storage: For storing tokens, consider using secure storage mechanisms like SecureStore for React Native or localStorage with secure practices.

 import SecureStore from 'react-native-secure-store'; const saveToken = async (token) => { await SecureStore.setItemAsync('auth_token', token); }; const getToken = async () => { return await SecureStore.getItemAsync('auth_token'); };

Encrypt Tokens: Encrypt tokens before storing them in Redux or local storage.
Token Expiry: Implement token expiration and refresh mechanisms to enhance security.
Sensitive Data Access: Restrict access to sensitive data within your application code.

84. How do you manage login and logout workflows with Redux actions and reducers?

Answer:

Managing login and logout workflows involves dispatching actions to update the authentication state and storing/removing tokens.

Example:

Actions:

 export const loginRequest = () => ({ type: 'LOGIN_REQUEST', }); export const loginSuccess = (user, token) => ({ type: 'LOGIN_SUCCESS', payload: { user, token }, }); export const loginFailure = (error) => ({ type: 'LOGIN_FAILURE', payload: { error }, }); export const logout = () => ({ type: 'LOGOUT', });

Reducer:

 const initialState = { user: null, token: null, isAuthenticated: false, loading: false, error: null, }; const authReducer = (state = initialState, action) => { switch (action.type) { case 'LOGIN_REQUEST': return { ...state, loading: true, error: null, }; case 'LOGIN_SUCCESS': return { ...state, user: action.payload.user, token: action.payload.token, isAuthenticated: true, loading: false, }; case 'LOGIN_FAILURE': return { ...state, loading: false, error: action.payload.error, }; case 'LOGOUT': return { ...state, user: null, token: null, isAuthenticated: false, }; default: return state; } }; export default authReducer;

Component:

 import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { loginRequest, loginSuccess, loginFailure, logout } from './authActions'; const AuthComponent = () => { const dispatch = useDispatch(); const { isAuthenticated, loading, error } = useSelector((state) => state.auth); const handleLogin = async () => { dispatch(loginRequest()); try { // Simulate login logic const user = { id: 1, name: 'John Doe' }; const token = 'some-auth-token'; dispatch(loginSuccess(user, token)); } catch (err) { dispatch(loginFailure('Login failed')); } }; const handleLogout = () => { dispatch(logout()); }; return ( <div> {loading && <p>Loading...</p>} {error && <p>{error}</p>} {isAuthenticated ? ( <button onClick={handleLogout}>Logout</button> ) : ( <button onClick={handleLogin}>Login</button> )} </div> ); }; export default AuthComponent;

These detailed explanations and code examples should provide a comprehensive understanding of managing form state and user authentication with Redux in a React Native application

Migrating to Redux and State Hydration & Community

85. How do you approach migrating a legacy application state management to Redux?

Answer:

Migrating a legacy application to Redux involves a step-by-step approach to ensure a smooth transition without disrupting the existing functionality.

Steps for Migration:

Evaluate Current State Management: Identify how the current state is managed and the parts of the application that can benefit from Redux.
Plan Incremental Migration: Plan to migrate the state management incrementally, starting with a small part of the application.
Set Up Redux: Set up Redux in your application by creating the store, reducers, and actions.

 import { createStore } from 'redux'; import rootReducer from './reducers'; const store = createStore(rootReducer);

Integrate Redux Provider: Wrap your application with the Redux Provider to make the store available.

 import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import store from './store'; import App from './App'; ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') );

Migrate State and Actions: Gradually migrate state and actions from the legacy state management to Redux.

 // Example of migrating a part of the state const initialState = { count: 0 }; const counterReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; default: return state; } }; export default counterReducer;

Connect Components to Redux: Use connect or hooks (useDispatch, useSelector) to connect components to the Redux store.

 import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { increment, decrement } from './actions'; const Counter = () => { const count = useSelector(state => state.count); const dispatch = useDispatch(); return ( <div> <h1>{count}</h1> <button onClick={() => dispatch(increment())}>Increment</button> <button onClick={() => dispatch(decrement())}>Decrement</button> </div> ); }; export default Counter;

86. Can you explain the concept of “state hydration” in the context of SSR and Redux?

Answer:

State Hydration in the context of Server-Side Rendering (SSR) and Redux refers to the process of initializing the Redux store on the client side with the state that was preloaded or generated on the server side.

Example:

Server-Side Rendering:

 import { createStore } from 'redux'; import rootReducer from './reducers'; import { Provider } from 'react-redux'; import React from 'react'; import ReactDOMServer from 'react-dom/server'; import App from './App'; const store = createStore(rootReducer); const preloadedState = store.getState(); const html = ReactDOMServer.renderToString( <Provider store={store}> <App /> </Provider> ); const fullHtml = ` <!DOCTYPE html> <html> <head> <title>SSR with Redux</title> </head> <body> <div id="root">${html}</div> <script> window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')} </script> <script src="/bundle.js"></script> </body> </html> `; res.send(fullHtml);

Client-Side Hydration:

 import { createStore } from 'redux'; import rootReducer from './reducers'; const preloadedState = window.__PRELOADED_STATE__; delete window.__PRELOADED_STATE__; const store = createStore(rootReducer, preloadedState); ReactDOM.hydrate( <Provider store={store}> <App /> </Provider>, document.getElementById('root') );

87. What challenges might arise when integrating Redux into an existing application and how would you address them?

Answer:

Challenges and Solutions:

Boilerplate Code: Redux can introduce a significant amount of boilerplate code.

Solution: Use Redux Toolkit to reduce boilerplate and simplify Redux logic.

 import { configureStore, createSlice } from '@reduxjs/toolkit'; const counterSlice = createSlice({ name: 'counter', initialState: { count: 0 }, reducers: { increment: state => { state.count += 1 }, decrement: state => { state.count -= 1 } } }); export const { increment, decrement } = counterSlice.actions; const store = configureStore({ reducer: { counter: counterSlice.reducer } }); export default store;

Performance Issues: Large applications might face performance issues due to frequent re-renders.

Solution: Use memoized selectors with reselect and avoid deeply nested state structures.

 import { createSelector } from 'reselect'; const selectCount = state => state.counter.count; const selectDoubleCount = createSelector( [selectCount], count => count * 2 );

Integration with Existing Code: Integrating Redux into an existing application can be complex.

Solution: Incremental migration, starting with non-critical parts of the application and gradually integrating Redux.

Learning Curve: Redux has a steep learning curve for new developers.

Solution: Provide comprehensive documentation and training resources to help the team get up to speed.

88. Describe the current trends and community practices around Redux.

Answer:

Current Trends:

Redux Toolkit: Adoption of Redux Toolkit for its simplicity and reduced boilerplate.
Hooks: Use of React hooks (useDispatch, useSelector) for a more functional and less verbose approach to interacting with Redux.
Normalized State: Emphasis on normalized state to manage complex and relational data.
TypeScript: Increasing use of TypeScript with Redux for better type safety and developer experience.
Middleware: Use of middleware like redux-thunk and redux-saga for handling asynchronous actions and side effects.

Community Practices:

Feature-Based Structure: Organizing code by feature to improve maintainability.
Selective State Management: Using Redux selectively for complex state management needs, while relying on local state for simpler cases.
Testing: Emphasis on testing Redux logic with tools like redux-mock-store and redux-saga-test-plan.
Code Splitting: Implementing code splitting and dynamic reducer injection for better performance in large applications.

89. How has Redux evolved to fit into the modern React ecosystem with hooks?

Answer:

Redux has evolved to integrate seamlessly with modern React practices, particularly through the introduction of hooks:

useSelector and useDispatch Hooks: These hooks provide a simpler and more functional way to access the Redux store and dispatch actions.

 import { useSelector, useDispatch } from 'react-redux'; const Counter = () => { const count = useSelector(state => state.counter.count); const dispatch = useDispatch(); return ( <div> <h1>{count}</h1> <button onClick={() => dispatch(increment())}>Increment</button> <button onClick={() => dispatch(decrement())}>Decrement</button> </div> ); };

Redux Toolkit: Provides a modern approach to Redux with built-in support for reducers, actions, and middleware, reducing boilerplate and enhancing productivity.

 import { configureStore, createSlice } from '@reduxjs/toolkit'; const counterSlice = createSlice({ name: 'counter', initialState: { count: 0 }, reducers: { increment: state => { state.count += 1 }, decrement: state => { state.count -= 1 } } }); export const { increment, decrement } = counterSlice.actions; const store = configureStore({ reducer: { counter: counterSlice.reducer } }); export default store;

90. What do you believe is the future of Redux given the context of emerging state management libraries?

Answer:

The future of Redux appears to be secure, but it will likely coexist with other state management solutions. Key aspects of its future include:

Continued Adoption of Redux Toolkit: Simplifying Redux usage and reducing boilerplate.
Improved Integration with React Ecosystem: Enhanced support for hooks and modern React features.
Selective Use Cases: Redux will be used for complex state management scenarios where its strengths in predictability, middleware, and tooling shine.
**Integration with Other State Management Solutions**: Developers might use Redux alongside other state management solutions like React’s Context API, Recoil, or Zustand for specific use cases.
Performance Optimization: Continued focus on performance improvements, especially for large applications.

Example of Combining Redux with React Context:

import React, { createContext, useContext, useReducer } from 'react'; import { Provider as ReduxProvider } from 'react-redux'; import { createStore } from 'redux'; import rootReducer from './reducers'; const StoreContext = createContext(); const customStore = { getState: () => ({}), dispatch: () => {}, subscribe: () => {}, }; const store = createStore(rootReducer); const CombinedProvider = ({ children }) => ( <StoreContext.Provider value={customStore}> <ReduxProvider store={store}> {children} </ReduxProvider> </StoreContext.Provider> ); const useStore = () => useContext(StoreContext); export { CombinedProvider, useStore };

These detailed explanations and code examples should provide a comprehensive understanding of migrating to Redux, state hydration, and the future of Redux in the React ecosystem.

Advanced State Modeling

91. How do you model complex state dependencies and computations in Redux?

Answer:

Modeling complex state dependencies and computations in Redux involves using selectors and memoization to derive data from the state. This ensures that the computations are efficient and only re-run when necessary.

Example:

Using reselect for Memoized Selectors:

 import { createSelector } from 'reselect'; const selectItems = (state) => state.items; const selectFilter = (state) => state.filter; const selectFilteredItems = createSelector( [selectItems, selectFilter], (items, filter) => items.filter(item => item.includes(filter)) ); const mapStateToProps = (state) => ({ filteredItems: selectFilteredItems(state), }); export default connect(mapStateToProps)(MyComponent);

Handling Derived State:

 const initialState = { items: ['apple', 'banana', 'cherry'], filter: 'a', }; const rootReducer = (state = initialState, action) => { switch (action.type) { case 'SET_FILTER': return { ...state, filter: action.payload, }; default: return state; } }; export default rootReducer;

92. Discuss your approach to type checking and ensuring state consistency.

Answer:

Ensuring type safety and state consistency in Redux can be achieved using TypeScript. TypeScript helps in defining types for state, actions, and reducers, providing compile-time checks and reducing runtime errors.

Example with TypeScript:

Define State and Action Types:

 interface AppState { count: number; } interface IncrementAction { type: 'INCREMENT'; } interface DecrementAction { type: 'DECREMENT'; } type AppAction = IncrementAction | DecrementAction;

Typed Reducer:

 const initialState: AppState = { count: 0, }; const rootReducer = (state = initialState, action: AppAction): AppState => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; default: return state; } }; export default rootReducer;

Typed Action Creators:

 const increment = (): IncrementAction => ({ type: 'INCREMENT' }); const decrement = (): DecrementAction => ({ type: 'DECREMENT' }); export { increment, decrement };

93. How do you tackle transactional updates in Redux?

Answer:

Transactional updates in Redux can be handled using middleware to ensure that either all actions in a transaction succeed or none do. This can be achieved using libraries like redux-thunk or custom middleware.

Example:

Custom Middleware for Transactions:

 const transactionMiddleware = ({ dispatch, getState }) => (next) => (action) => { if (action.type === 'BEGIN_TRANSACTION') { dispatch({ type: 'TRANSACTION_STARTED' }); try { action.payload.forEach((transactionAction) => { dispatch(transactionAction); }); dispatch({ type: 'TRANSACTION_COMMITTED' }); } catch (error) { dispatch({ type: 'TRANSACTION_ROLLED_BACK' }); // Optionally, add logic to revert actions if needed } } else { return next(action); } }; const store = createStore(rootReducer, applyMiddleware(transactionMiddleware));

Using the Middleware:

 const beginTransaction = (actions) => ({ type: 'BEGIN_TRANSACTION', payload: actions, }); store.dispatch(beginTransaction([ { type: 'ACTION_ONE' }, { type: 'ACTION_TWO' }, ]));

94. What strategies would you use for undo/redo functionality in a Redux application?

Answer:

Undo/redo functionality can be implemented using a higher-order reducer to manage the history of states.

Example:

Higher-Order Reducer:

 const undoable = (reducer) => { const initialState = { past: [], present: reducer(undefined, {}), future: [], }; return (state = initialState, action) => { const { past, present, future } = state; switch (action.type) { case 'UNDO': const previous = past[past.length - 1]; const newPast = past.slice(0, past.length - 1); return { past: newPast, present: previous, future: [present, ...future], }; case 'REDO': const next = future[0]; const newFuture = future.slice(1); return { past: [...past, present], present: next, future: newFuture, }; default: const newPresent = reducer(present, action); if (present === newPresent) { return state; } return { past: [...past, present], present: newPresent, future: [], }; } }; }; const rootReducer = combineReducers({ counter: undoable(counterReducer), }); const store = createStore(rootReducer);

Actions for Undo/Redo:

 const undo = () => ({ type: 'UNDO' }); const redo = () => ({ type: 'REDO' }); store.dispatch(undo()); store.dispatch(redo());

95. How does Redux interact with WebSockets or external data sources?

Answer:

Redux can interact with WebSockets or external data sources by using middleware to handle asynchronous operations and manage real-time data updates.

Example:

WebSocket Middleware:

 const socketMiddleware = (socket) => ({ dispatch, getState }) => { socket.on('message', (message) => { dispatch({ type: 'WEBSOCKET_MESSAGE', payload: message }); }); return (next) => (action) => { if (action.type === 'SEND_WEBSOCKET_MESSAGE') { socket.send(action.payload); } return next(action); }; }; const socket = new WebSocket('ws://example.com/socket'); const store = createStore(rootReducer, applyMiddleware(socketMiddleware(socket)));

Handling External Data Sources:

 const fetchData = () => async (dispatch) => { const response = await fetch('https://api.example.com/data'); const data = await response.json(); dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }); }; store.dispatch(fetchData());

96. Discuss the integration of GraphQL in a Redux-managed application.

Answer:

Integrating GraphQL in a Redux-managed application can be done using middleware or libraries like apollo-client to handle queries and mutations.

Example:

Setup Apollo Client:

 import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client'; import { ApolloProvider } from '@apollo/client/react'; const client = new ApolloClient({ link: new HttpLink({ uri: 'https://graphql.example.com/graphql' }), cache: new InMemoryCache(), }); const App = () => ( <ApolloProvider client={client}> <YourComponent /> </ApolloProvider> );

Fetching Data with GraphQL:

 import { gql, useQuery } from '@apollo/client'; const GET_ITEMS = gql` query GetItems { items { id name } } `; const YourComponent = () => { const { loading, error, data } = useQuery(GET_ITEMS); if (loading) return <p>Loading...</p>; if (error) return <p>Error :(</p>; return ( <ul> {data.items.map(({ id, name }) => ( <li key={id}>{name}</li> ))} </ul> ); };

97. How would you manage local vs. server state in a Redux application?

Answer:

Managing local vs. server state involves using Redux for global state that needs to be shared across the application, while using component local state for transient UI states.

Example:

Server State with Redux:

 // actions.js export const fetchData = () => async (dispatch) => { const response = await fetch('https://api.example.com/data'); const data = await response.json(); dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }); }; // reducer.js const initialState = { data: [], }; const dataReducer = (state = initialState, action) => { switch (action.type) { case 'FETCH_DATA_SUCCESS': return { ...state, data: action.payload }; default: return state; } }; export default dataReducer;

**Local State in Component**:

 const YourComponent = () => { const [localState, setLocalState] = useState(''); const handleChange = (e) => { setLocalState(e.target.value); }; return ( <div> <input type="text" value={localState} onChange={handleChange} /> </div> ); }; export default YourComponent;

By separating concerns and using Redux for server-synced state and local component state for transient UI interactions, you can manage state efficiently in a Redux application.

These detailed explanations and code examples should provide a comprehensive understanding of advanced state modeling, Redux interoperability, and ensuring state consistency in Redux applications

Redux API Requests & Catching

Let’s address the questions in the image with detailed explanations and code examples related to structuring API requests, caching API responses, and managing RESTful or GraphQL API interactions with Redux.

98. How do you structure API requests in Redux actions?

Answer:

Structuring API requests in Redux actions typically involves using middleware like redux-thunk or redux-saga to handle asynchronous operations.

Example using redux-thunk:

Action Creators:

 import { Dispatch } from 'redux'; export const fetchDataRequest = () => ({ type: 'FETCH_DATA_REQUEST', }); export const fetchDataSuccess = (data) => ({ type: 'FETCH_DATA_SUCCESS', payload: data, }); export const fetchDataFailure = (error) => ({ type: 'FETCH_DATA_FAILURE', payload: error, }); export const fetchData = () => async (dispatch: Dispatch) => { dispatch(fetchDataRequest()); try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); dispatch(fetchDataSuccess(data)); } catch (error) { dispatch(fetchDataFailure(error)); } };

Reducer:

 const initialState = { loading: false, data: [], error: null, }; const dataReducer = (state = initialState, action) => { switch (action.type) { case 'FETCH_DATA_REQUEST': return { ...state, loading: true }; case 'FETCH_DATA_SUCCESS': return { ...state, loading: false, data: action.payload }; case 'FETCH_DATA_FAILURE': return { ...state, loading: false, error: action.payload }; default: return state; } }; export default dataReducer;

Component:

 import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { fetchData } from './actions'; const DataComponent = () => { const dispatch = useDispatch(); const { loading, data, error } = useSelector((state) => state.data); useEffect(() => { dispatch(fetchData()); }, [dispatch]); if (loading) return <p>Loading...</p>; if (error) return <p>Error: {error.message}</p>; return ( <ul> {data.map((item) => ( <li key={item.id}>{item.name}</li> ))} </ul> ); }; export default DataComponent;

99. Discuss methods for caching API responses in the Redux store.

Answer:

Caching API responses in the Redux store can improve performance and reduce unnecessary network requests. This can be achieved by storing the fetched data along with a timestamp and checking the cache before making a new API request.

Example:

Action Creators:

 const CACHE_DURATION = 60000; // 1 minute export const fetchData = () => async (dispatch, getState) => { const { lastFetch } = getState().data; if (Date.now() - lastFetch < CACHE_DURATION) { return; } dispatch(fetchDataRequest()); try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); dispatch(fetchDataSuccess(data)); } catch (error) { dispatch(fetchDataFailure(error)); } };

Reducer:

 const initialState = { loading: false, data: [], lastFetch: 0, error: null, }; const dataReducer = (state = initialState, action) => { switch (action.type) { case 'FETCH_DATA_REQUEST': return { ...state, loading: true }; case 'FETCH_DATA_SUCCESS': return { ...state, loading: false, data: action.payload, lastFetch: Date.now(), }; case 'FETCH_DATA_FAILURE': return { ...state, loading: false, error: action.payload }; default: return state; } }; export default dataReducer;

100. What patterns or libraries do you use to manage RESTful or GraphQL API interactions with Redux?

Answer:

Libraries:

redux-thunk: Middleware for handling asynchronous operations.

 npm install redux-thunk

redux-saga: Middleware for handling complex side effects.

 npm install redux-saga

redux-toolkit: Provides utilities for creating actions and reducers, including API interaction.

 npm install @reduxjs/toolkit

apollo-client: Manages GraphQL interactions and integrates with Redux.

 npm install @apollo/client

Patterns:

Thunk Pattern for RESTful APIs:

 import { createAsyncThunk } from '@reduxjs/toolkit'; export const fetchData = createAsyncThunk('data/fetchData', async () => { const response = await fetch('https://api.example.com/data'); return response.json(); }); const dataSlice = createSlice({ name: 'data', initialState: { data: [], loading: false, error: null }, reducers: {}, extraReducers: (builder) => { builder .addCase(fetchData.pending, (state) => { state.loading = true; }) .addCase(fetchData.fulfilled, (state, action) => { state.loading = false; state.data = action.payload; }) .addCase(fetchData.rejected, (state, action) => { state.loading = false; state.error = action.error.message; }); }, }); export default dataSlice.reducer;

Saga Pattern for Complex Side Effects:

 import { call, put, takeEvery } from 'redux-saga/effects'; import { fetchDataSuccess, fetchDataFailure } from './actions'; function* fetchDataSaga() { try { const response = yield call(fetch, 'https://api.example.com/data'); const data = yield response.json(); yield put(fetchDataSuccess(data)); } catch (error) { yield put(fetchDataFailure(error.message)); } } function* watchFetchData() { yield takeEvery('FETCH_DATA_REQUEST', fetchDataSaga); } export default watchFetchData;

GraphQL with Apollo Client:

 import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client'; import { ApolloProvider } from '@apollo/client/react'; const client = new ApolloClient({ link: new HttpLink({ uri: 'https://graphql.example.com/graphql' }), cache: new InMemoryCache(), }); const App = () => ( <ApolloProvider client={client}> <YourComponent /> </ApolloProvider> );

Fetching Data with GraphQL:

 import { gql, useQuery } from '@apollo/client'; const GET_ITEMS = gql` query GetItems { items { id name } } `; const YourComponent = () => { const { loading, error, data } = useQuery(GET_ITEMS); if (loading) return <p>Loading...</p>; if (error) return <p>Error :(</p>; return ( <ul> {data.items.map(({ id, name }) => ( <li key={id}>{name}</li> ))} </ul> ); }; export default YourComponent;

These detailed explanations and code examples should provide a comprehensive understanding of structuring API requests, caching API responses, and managing RESTful or GraphQL API interactions with Redux.

Hiệu Suất React Native Và Cách Khắc Phục (Part 1)