Type-Safe Redux: Advanced Techniques with TypeScript

Course details

Redux remains a crucial tool for managing state in complex React applications, and TypeScript adoption is on the rise within the developer community. By combining these two technologies, developers can enhance their productivity, reduce bugs, and maintain cleaner codebases.

This course covers essential topics such as Redux core concepts, type-safe actions and reducers, asynchronous actions with Redux Thunk, integration with React and TypeScript, testing Redux code, and real-world project implementation. Gain the confidence to apply these concepts to real-world Redux applications, enhancing your proficiency in building scalable, maintainable, and type-safe web applications.

Learning objectives
Create type-safe actions, reducers, and selectors.
Implement asynchronous actions using middleware like Redux Thunk.
Integrate Redux with React components in TypeScript projects.
Write comprehensive tests for Redux codebases.
Optimize Redux performance.
Effectively debug applications.

Concepts

Introduction to Type-Safe Redux

01 - Looking at advanced Redux patterns
02 - Understanding the need for type-safe Redux
03 - Why now The intersection of Redux and TypeScript

1. Setting Up Redux Toolkit with TypeScript

04 - Installing Redux Toolkit and setting up TypeScript
05 - Configure the Redux store with Redux Toolkit
06 - Adding Redux middleware and DevTools
07 - Connecting our React app to the store

2. Type-Safe Actions and Reducers

08 - Defining typed state with TypeScript interfaces
09 - Creating type-safe actions with createSlice
10 - Handling nested and complex state structures in Redux
11 - Managing asynchronous actions with createAsyncThunk

3. Combined Reducers, Type-Safe Selectors, Thunks, and Side Effects

12 - Combining multiple reducers for large applications
13 - Writing memoized and typed selectors with createSelector
14 - Balancing global and local state with React and Redux

4. Integrating React Components with Redux

15 - Utilizing useSelector to retrieve Redux state in React
16 - Dispatching actions with useDispatch
17 - Creating custom hooks for Redux logic

5. Testing Redux Logic in a Type-Safe Way

18 - Unit testing Redux store configuration, slices and selectors
19 - Testing async Thunks and mocking API calls in Redux Toolkit
20 - Test-driven development (TDD) with Redux and TypeScript

Conclusion and Next Steps

21 - Reviewing course highlights
22 - Continuing the learning journey