Async in Redux Workshop: Module 2

Transcript

1. MODULE 2: REDUX CRASH COURSE
2. AGENDA ▸ What is Redux? ▸ The Gist ▸ 3 Redux Parts / Principles
3. OK, SO WHAT IS REDUX EXACTLY?
4. WHAT IS REDUX? ▸ Officially: Redux is a predictable state container for JS apps. Basically it’s a functional approach to managing state. ▸ Designed with React in mind, but can be used with any rendering library ▸ Excellent developer experience ▸ Like React, it works on the client, server, and native environments ▸ Ability to rewind your state aka time traveling. Makes testing easy. ▸ Extremely small (around 300 lines of code)
5. THE GIST
12. 3 PARTS OF REDUX
13. PART 1: THE STORE ▸ Unlike Flux, all the state of your application lives in just one single store in Redux. ▸ Single source of truth ▸ This makes it easy to serialize and debug your application ▸ In practice, there is very little need for multiple stores ▸ A good analogy is a simple JSON store ▸ Getting the entire state of the application is easy ▸ To get the truth, use `getState()`
15. PART 2: ACTIONS ▸ State is read-only. In other words it’s immutable. ▸ To change the state, you need to dispatch an “event” or “action” to the store. ▸ Basically, actions describe what happened which the store figures out how to handle the action ▸ This sticks to React’s unidirectional data flow philosophy ▸ To tell the store an action occurred, use `dispatch()`
19. PART 3: THE REDUCER ▸ The store uses a reducer function to determine how to handle actions and update the state ▸ A reducer is a pure function with no side effects ▸ Reducers take the current state and an action, then return the next state