This Introduction to Redux for React using TypeScript training teaches developers the skills they need to immediately use Redux in their React applications.
All students will:
- Understand state management including when it is needed and the various alternatives
- Utilize Redux to manage the state of the application
- Use React and Redux together
- Implement React and Redux best practices
- Write unit tests for React using Jest and React Testing Library
Attendees must have prior React development experience.
- Google Chrome and/or Firefox
- Other modern browsers as desired
- IDE/development environment of your choice
- Other free software and lab files that Accelebrate would specify, including Node.js
- What is State?
- When do you need a State Management library?
- Alternatives to Redux
- Using Context for Shared State
- Server State: React Query, SWR, or GraphQL client
- What is Redux?
- Benefits Checklist
- Principles of Redux
- Core Concepts (Store, State, Reducers, Actions, Action Creators)
- Complementary Packages
- When do you need Redux?
- Basic Redux Example (includes time traveling)
Using Redux with React (React Redux Library)
- Redux with React in Function Components
- useSelector and useDispatch Hooks
- Redux with React in Class Components
- Higher-Order Components
- The connect function
- Writing mapState functions
- Writing mapDispatch Functions
Asynchronous Actions (Redux Thunk)
- Async Actions (Thunks)
- Your First Thunk
- Full CRUD Example
Putting It All Together (React & Redux & Thunk)
Redux with TypeScript
- Usage with:
- Actions & Action Creators
- Connect (React Redux)
- Tools (Jest, Enzyme, JSDOM)
- Mocking Modules
- Mocking Functions
- Debugging Tests
- Testing Redux Actions & Thunks, Reducers, HTTP calls
- What causes a component to render?
- Wasted Renders
- Pure Components