TypeScript · Senior · Question 48 of 75

How do you type a reducer so that `payload` depends on the action's `type`?

✓Correct answer: Describe the actions as a union discriminated by the type field
2Make payload: any and check it in every case
3Create one Action interface with all fields optional

Explanation

type Action = { type: 'add'; payload: Todo } | { type: 'remove'; payload: { id: string } } - in case 'add' TS knows payload is a Todo. With never in default you get an exhaustiveness check. Redux Toolkit generates such types automatically from createSlice.

How do you type a reducer so that `payload` depends on the action's `type`?

Explanation

Further reading

Problem with a question

Test yourself

How do you type a reducer so that payload depends on the action's type?

Explanation

Further reading

Test yourself

How do you type a reducer so that `payload` depends on the action's `type`?