Reactive web application programming based on React and Redux
The workshop provides a detailed introduction to state management in React applications using Redux. Participants will learn how to build scalable action, reducer, and store structures, work with middleware, developer tools, and optimization techniques. We will analyze data flow in the unidirectional data flow architecture and demonstrate how to use it to control complex business processes. After the workshop, participants will be able to design and develop large applications where state management is clear, predictable, and easy to maintain — both individually and in larger teams.
Duration
3 days
Cost per person
3375 PLN net
for a group of min. 4 people
Participant Rating
4.81 / 5
Based on 10 responses
This training is for you if
- you want to organize your knowledge and see how to apply it in day-to-day work
- you work on applications or tools that need to stay readable, maintainable, and testable
- you value practical exercises, trade-off discussions, and examples close to real projects
This is not the best choice if
- you are looking only for a theoretical lecture without workshop practice
- you need a very basic introduction to programming from scratch
- you expect ready-made recipes without discussing context, constraints, and consequences
Trainer
Mateusz
Jabłoński
Senior Frontend Developer, trainer, and author of technical materials. Since 2016, I have been running training sessions on JavaScript, TypeScript, React, testing, and tools that support software developers.
Training program
Introduction to Redux-Based Architecture
- Overview of unidirectional data flow in React
- Why global state management is needed in larger applications
- Identifying problems caused by prop drilling and fragmented state
Installing and Configuring Redux in a React Application
- Installing `redux` and `react-redux`
- Creating the `store` folder and structuring the application around Redux
- Configuring the `store` and integrating it into the app using `Provider`
Creating Reducers and Actions
- What a reducer is and how it works
- Creating actions — synchronous and asynchronous actions
- Using `combineReducers` to manage multiple reducers
Using Selectors and Mapping State to Components
- Accessing global state with `useSelector`
- Mapping state to props using `mapStateToProps`
- Examples of computed selectors (memoization with `reselect`)
Dispatching Actions and Updating State
- Using `useDispatch` to trigger actions from functional components
- Mapping actions to props in class components using `mapDispatchToProps`
- Handling asynchronous operations with `redux-thunk` or `redux-saga`
Redux Middleware and Extensions
- Introduction to middleware: what it does and when to use it
- Using `redux-logger` for debugging
- Introducing and implementing `redux-thunk` or `redux-saga` for managing side effects
Structuring Large Redux Applications
- Modularizing the application: duck pattern and feature-based structure
- Dynamically loading reducers: lazy reducer loading
- Managing complex state using data normalization
Debugging and Testing Redux Applications
- Using Redux DevTools to track state changes and actions
- Writing unit tests for reducers and actions with `jest`
- Testing Redux-connected components with `react-testing-library`
Optimizing Performance in Redux Applications
- Using `React.memo` and `useMemo` to prevent unnecessary re-renders
- Memoizing selectors with `reselect`
- Performance analysis with tools like `why-did-you-render`
Alternatives to Redux and the Future of State Management
- Brief introduction to the Context API as an alternative to Redux
- Other state management libraries such as MobX or Zustand
- New trends: Redux Toolkit and reducing Redux boilerplate
Zakład Ubezpieczeń Społecznych
Sages
4.81(average rating)