React With Redux Tutorial | React Redux Tutorial For Beginners | ReactJS For Beginners | Simplilearn

2. What’s in it for you? Comparison between ReactJS, Angular and Vue with respect to - Why Redux? What is Redux? Principles of Redux Pillars of Redux Pros and Cons of Redux Demo

3. Why Redux?

4. Click here to watch the video

5. Why Redux? Let’s learn about state objects and see why Redux was introduced

6. Why Redux? A state is an object that stores the values of properties belonging to a component that could change over a period of time A state can be modified based on user action or network changes Every time the state of an object changes, React re-renders the component to the browser The state object can store multiple properties

7. Why Redux? Consider a humungous React application that consists of several components with a massive number of state objects

8. Why Redux? Every time the user switches to a different application and returns to the current app, they will find the app in the same “state”

9. Why Redux? This is because the state of the application while switching, was stored and then was re-rendered when switched back. Hence these state objects need to be managed and Redux does just the same

10. Why Redux? This is because the state of the application while switching, was stored and then was re-rendered when switched back. Hence these state objects need to be managed, and Redux does just the same

11. What is Redux?

12. What is Redux? Redux is a predictable state container for JavaScript applications. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test

13. What is Redux? Redux is a predictable state container for JavaScript applications. It helps you write apps that behave consistently, run in different environments (client, server, and native), and are easy to test

14. What is Redux? Redux is a predictable state container for JavaScript applications. It helps you write apps that behave consistently, run in different environments (client, server, and native), and are easy to test Redux is a state management tool

15. What is Redux? Redux is a predictable state container for JavaScript applications. It helps you write apps that behave consistently, run in different environments (client, server, and native), and are easy to test Redux is a state management tool Redux can be used with any JavaScript framework or library

16. What is Redux? Redux is a predictable state container for JavaScript applications. It helps you write apps that behave consistently, run in different environments (client, server, and native), and are easy to test Redux is a state management tool Redux can be used with any JavaScript framework or library Redux stores the state of the application, and the components can any access the state from a state store

17. What is Redux? In simple words..

18. What is Redux? In simple words.. Redux stores all the state objects in a single store and organizes it

19. What is Redux? In simple words.. It provides information about the current state of the application

20. What is Redux? In simple words.. Any changes in the state of the application can be described to this store by the user

21. What is Redux? In simple words.. It notifies any modifications made to the state of the application

22. Principles of Redux

23. Principles of Redux 1 Single source of truth

24. Principles of Redux 1 Single source of truth The state of your whole application is stored in an object tree within a single-store

25. Principles of Redux 1 Single source of truth The state of your whole application is stored in an object tree within a single-store A single state tree also makes it easier to debug or inspect an application

26. Principles of Redux 1 Single source of truth The state of your whole application is stored in an object tree within a single-store A single state tree also makes it easier to debug or inspect an application It also enables you to persist your app's state in development, for a faster development cycle

27. Principles of Redux 2 State is read-only

28. Principles of Redux 2 State is read-only The only way to change the state is to emit an action, an object describing what happened

29. Principles of Redux 2 State is read-only The only way to change the state is to emit an action, an object describing what happened This feature ensures that no events like network callbacks or views change the state. They can only express an intent to change the state

30. Principles of Redux 2 State is read-only The only way to change the state is to emit an action, an object describing what happened This feature ensures that no events like network callbacks or views change the state. They can only express an intent to change the state Actions are just plain objects; they can be logged, serialized, stored, and later replayed for debugging or testing purposes

31. Principles of Redux 3 Changes are made with pure functions

32. Principles of Redux 3 Changes are made with pure functions To specify how actions transform the state tree, you write pure reducers

33. Principles of Redux 3 Changes are made with pure functions To specify how actions transform the state tree, you write pure reducers A reducer is a function that accepts an accumulation and a value and returns a new accumulation. They are used to reduce a collection of values down to a single value

34. Principles of Redux 3 Changes are made with pure functions To specify how actions transform the state tree, you write pure reducers The user can return new state objects, instead of mutating the previous state

35. Principles of Redux 3 Changes are made with pure functions To specify how actions transform the state tree, you write pure reducers The user can return new state objects, instead of mutating the previous state The user can start with a single reducer, and as the app grows, one can split it off into smaller reducers that manage specific parts of the state tree

36. Principles of Redux 3 Changes are made with pure functions To specify how actions transform the state tree, you write pure reducers The user can return new state objects, instead of mutating the previous state The user can start with a single reducer, and as the app grows, one can split it off into smaller reducers that manage specific parts of the state tree Because reducers are just functions, controlling the order in which they are called, pass additional data, or even making reusable reducers becomes easy

37. Pillars of Redux

38. Pillars of Redux Store A store is an object that holds the application's state tree. There should only be a single store in a Redux app, as the composition happens on the reducer level getState dispatch subscribe unsubscribe Action Reducers

39. Pillars of Redux Store A store is an object that holds the application's state tree. There should only be a single store in a Redux app, as the composition happens on the reducer level getState dispatch subscribe unsubscribe getState() returns the current state of the store Action Reducers

40. Pillars of Redux Store A store is an object that holds the application's state tree. There should only be a single store in a Redux app, as the composition happens on the reducer level getState dispatch subscribe unsubscribe getState() returns the current state of the store console.log("store.getState()"); Action Reducers

41. Pillars of Redux Store A store is an object that holds the application's state tree. There should only be a single store in a Redux app, as the composition happens on the reducer level getState dispatch subscribe unsubscribe getState() returns the current state of the store dispatch() This dispatches an action. It is the only way to update the application state Action Reducers

42. Pillars of Redux Store A store is an object that holds the application's state tree. There should only be a single store in a Redux app, as the composition happens on the reducer level getState dispatch subscribe unsubscribe getState() returns the current state of the store dispatch() This dispatches an action. It is the only way to update the application state Action Buttonchange: () =>dispatch({msg:"Message_change"}) Reducers

43. Pillars of Redux Store A store is an object that holds the application’s state tree. There should only be a single store in a Redux app, as the composition happens on the reducer level getState dispatch subscribe unsubscribe getState() returns the current state of the store dispatch() This dispatches an action. It is the only way to update the application state subscribe() This method subscribes a change listener to the state unsubscribe() It’s useful when you no longer want to call your listener method when the state changes Action Reducers

44. Pillars of Redux Store A store is an object that holds the application's state tree. There should only be a single store in a Redux app, as the composition happens on the reducer level getState dispatch subscribe unsubscribe getState() returns the current state of the store dispatch() This dispatches an action. It is the only way to update the application state subscribe() This method subscribes a change listener to the state unsubscribe() It’s useful when you no longer want to call your listener method when the state changes Action Reducers constunsubscribe = store.subscribe(handleChange) unsubscribe()

45. Pillars of Redux Store An action is a plain object that represents an intention to change the state getState dispatch subscribe unsubscribe Action Reducers

46. Pillars of Redux Store An action is a plain object that represents an intention to change the state getState dispatch subscribe unsubscribe Actions are payloads of information that send data from your application to your store Action Reducers

47. Pillars of Redux Store An action is a plain object that represents an intention to change the state getState dispatch subscribe unsubscribe Actions are payloads of information that send data from your application to your store Any data, whether from UI events or network callbacks, needs to be dispatched as actions eventually Action Reducers

48. Pillars of Redux Store An action is a plain object that represents an intention to change the state getState dispatch subscribe unsubscribe Actions are payloads of information that send data from your application to your store Any data, whether from UI events or network callbacks, needs to be dispatched as actions eventually Action Actions must have a type field that indicates the type of action being performed Reducers

49. Pillars of Redux Store Reducers specify how the application's state changes in response to actions sent to the store getState dispatch subscribe unsubscribe Action Reducers

50. Pillars of Redux Store Reducers specify how the application's state changes in response to actions sent to the store getState dispatch subscribe unsubscribe Actions only describe what happened, but don't describe how the application's state changes Action Reducers