Advanced Redux architecture - WHAT/WHEN/WHY/HOW
- 2. Redux in three fundamental principles: Single source of truth The global state of your application is stored in an object tree within a single store. State is read-only The only way to change the state is to emit an action, an object describing what happened. Changes with pure functions Reducers are just pure functions that take the previous state and an action, and return the next state.
- 3. CQRS - Command Query Responsibility Segregation Commands - command that performs an action - change the state of the system, but not return a value Queries - query that returns data to the caller - return a result and do not change the observable state of the system
- 4. React Context Low-frequency updates like locale, theme changes, user authentication, etc. Redux Complex state management which allows high-frequency updates with full optimization with a solid consistency architecture
- 5. The context API with hooks is much easier to implement and will not increase the app bundle size. It is a boilerplate and requires a bunch of libraries. But it remains a great solution towards props drilling. React Context Redux
- 6. WHO WINS? For more complex state which has high-frequency updates, the React Context won't be a good solution. Because, the React Context will trigger a re-render on each update, and optimizing it manually can be really tough
- 10. Redux rules - Recommended Write Action Types as domain/eventName Write Actions Using the Flux Standard Action Convention Use middlewares for Async Logic Move Complex Logic Outside Components Use Selector Functions to Read from Store State - (reselect) Avoid Putting Form State In Redux*
- 12. Redux rules - Essentials Do Not Mutate State Reducers Must Not Have Side Effects Do Not Put Non-Serializable Values in State or Actions Only One Redux Store Per App
- 15. Events Internal UI events Notify a change More than one handler Commands API calls Invoke a procedure One handler Documents Spread data Transfer data No reply, one reducer 2. Construction Action categories
- 17. 3. Action processing Message routing patterns
- 18. 3. Action processing Message routing patterns Filtering function* watchFetchProducts() { yield takeEvery('FETCH_PRODUCTS_REQUESTED', fetchProducts); }
- 19. 3. Action processing Message routing patterns Mapping try { const data = yield call(Api.fetchUser, action.payload.url) yield put({ type: "FETCH_USERS_SUCCEEDED", data }) } catch (error) { yield put({ type: "FETCH_USERS_FAILED", error }) }
- 20. 3. Action processing Message routing patterns Splitting if(action.type === “FETCH_POSTS_SUCCEEDED”) { dispatch({ type: HIDE_LOADER }); dispatch({ type: DISPLAY_POSTS }); }
- 25. 4. Middlewares Redux-thunk Redux-saga Redux-observable To take under consideration 1. Complexity 2. Coding Style 3. Learning Curve 4. Testability
- 26. WHY/WHEN TO USE REDUX 1. The same piece of application state needs to be mapped to multiple container components. 2. Global components that can be accessed from anywhere 3. Too many props are being passed through multiple hierarchies of components. 4. State management using setState is bloating the component 5. Caching page state
- 27. [email protected] Private and company consultation THANK YOU