Redux is a state container for JavaScript apps that uses a single state tree and reducer functions to update the state in a predictable way. It is inspired by Flux but aims to address some of its shortcomings. The document then discusses the key concepts in Redux including components, the store, reducers, actions, and connecting React components to the store. It also briefly introduces Redux Saga as a middleware library that uses generators to simplify asynchronous logic involving side effects.

1. Redux
--Rahil Memon--

2. Redux ?
● A Predictable state container for JavaScript apps
● Inspired by FLUX.
● BUT WHY State Container ? WHY Redux,
● What Problems does Redux Solve ?
● Let’s Understand it in detail.

3. COMPONENTS Are Building Blocks of React
Application.

4. Each Component Represent part of Web App.

9. ToDo App

10. ToDo App

11. ToDo App

12. ToDo App

13. The component-based approach of React.
The component-based approach of React
and other frontend frameworks like Vue and Angular has changed the way
our web looks like today.

14. Example, John!

15. Example, John!

16. Store
Redux Store, Single source of Truth.

18. Let’s Code Redux.

19. Store?
● It's just an object with a few methods on it.
● A store holds the whole state tree of your application.
● The only way to change the state inside it is to dispatch an action on it.

20. Reducer ?
Reducers specify how the application's state changes in response to
actions sent to the store.
Remember that actions only describe what happened, but don't describe how the
application's state changes.

21. store.dispatch()
Dispatches an action. This is the only way to trigger a state change

22. store.getState()
Returns the current state tree of your application. It is equal to the last value
returned by the store's reducer.

23. Connect().
The connect() function connects a React component to a Redux store.

24. ToDO With Redux

25. Redux Saga
--Rahil Memon--

26. Redux Saga.
Redux-saga is a redux middleware library, that is designed to make handling side
effects in your redux app nice and simple.
It achieves this by leveraging an ES6 feature called Generators.

27. Generators.
Generators, allowing us to write asynchronous code that looks synchronous, and
is very easy to test.

28. Thank You
--Rahil Memon--