React redux-redux-saga-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.
- 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
- 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.