Mateusz Jabłoński - Blog, programming, selfdevelopment
PL

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
Ask for a date

Training program

Introduction to Redux-Based Architecture

  1. Overview of unidirectional data flow in React
  2. Why global state management is needed in larger applications
  3. Identifying problems caused by prop drilling and fragmented state

Installing and Configuring Redux in a React Application

  1. Installing `redux` and `react-redux`
  2. Creating the `store` folder and structuring the application around Redux
  3. Configuring the `store` and integrating it into the app using `Provider`

Creating Reducers and Actions

  1. What a reducer is and how it works
  2. Creating actions — synchronous and asynchronous actions
  3. Using `combineReducers` to manage multiple reducers

Using Selectors and Mapping State to Components

  1. Accessing global state with `useSelector`
  2. Mapping state to props using `mapStateToProps`
  3. Examples of computed selectors (memoization with `reselect`)

Dispatching Actions and Updating State

  1. Using `useDispatch` to trigger actions from functional components
  2. Mapping actions to props in class components using `mapDispatchToProps`
  3. Handling asynchronous operations with `redux-thunk` or `redux-saga`

Redux Middleware and Extensions

  1. Introduction to middleware: what it does and when to use it
  2. Using `redux-logger` for debugging
  3. Introducing and implementing `redux-thunk` or `redux-saga` for managing side effects

Structuring Large Redux Applications

  1. Modularizing the application: duck pattern and feature-based structure
  2. Dynamically loading reducers: lazy reducer loading
  3. Managing complex state using data normalization

Debugging and Testing Redux Applications

  1. Using Redux DevTools to track state changes and actions
  2. Writing unit tests for reducers and actions with `jest`
  3. Testing Redux-connected components with `react-testing-library`

Optimizing Performance in Redux Applications

  1. Using `React.memo` and `useMemo` to prevent unnecessary re-renders
  2. Memoizing selectors with `reselect`
  3. Performance analysis with tools like `why-did-you-render`

Alternatives to Redux and the Future of State Management

  1. Brief introduction to the Context API as an alternative to Redux
  2. Other state management libraries such as MobX or Zustand
  3. New trends: Redux Toolkit and reducing Redux boilerplate