Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BetterMe: ReduxCore library. Intro

BetterMe: ReduxCore library. Intro

Ef8736326a106f57ca04e7d7101997f3?s=128

Maksym Husar

August 11, 2021
Tweet

Transcript

  1. BetterMe ReduxCore library. Intro Slides by Maksym Husar Andrey Bogushev

  2. None
  3. Redux Basics

  4. 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 are made with pure functions To specify how the state tree is transformed by actions, you write pure reducers. https://redux.js.org/understanding/thinking-in-redux/three-principles
  5. Redux Application Data Flow One-way data flow: • State describes

    the condition of the app at a specific point in time • The UI is rendered based on that state • When something happens (such as a user clicking a button), the state is updated based on what occurred • The UI re-renders based on the new state
  6. State scheme State SubState ... SubState SubSubState SubSubState ... SubState?

    SubState? ...
  7. Redux Basics https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow

  8. Redux Basics Async logic https://redux.js.org/tutorials/fundamentals/part-6-async-logic

  9. ReduxCore library overview https://github.com/betterme-dev/ReduxCore

  10. Abstractions • Action • Reducer • Dispatch & Observer •

    Middleware
  11. Action

  12. Example of Actions in the App

  13. Abstractions • Action • Reducer • Dispatch & Observer •

    Middleware
  14. Reducer

  15. State scheme State SubState ... SubState SubSubState SubSubState ... SubState?

    SubState? ...
  16. Example of the Main Reducer in the App

  17. Example of Reducer for SubState in the App

  18. Abstractions • Action • Reducer • Dispatch & Observer •

    Middleware
  19. Dispatch & Observer * We use CommandWith<State> type instead of

    Observer typealias for more flexibility
  20. Dispatch & Observer

  21. Abstractions • Action • Reducer • Dispatch & Observer •

    Middleware
  22. Middleware * (Dispatch, Action, oldState, newState) -> Void

  23. Example of Middleware in the App

  24. Example of Middleware in the App

  25. Abstractions

  26. None
  27. Entities • Command • Store

  28. Command Interface (simplified) Command is a developer friendly wrapper around

    a closure
  29. Command Helpers

  30. Entities • Command • Store

  31. Store Interface (simplified)

  32. Our Redux flow modification Middleware

  33. None
  34. Demo App https://github.com/betterme-dev/ReduxCore/tree/main/Examples/Ex.1%20Flashlight

  35. None
  36. Project structure

  37. Main parts of the App • State & SubStates •

    Store setup • Middlewares • Presentation Layer
  38. State & SubStates

  39. State & SubStates

  40. State & SubStates

  41. Main parts of the App • State & SubStates •

    Store setup • Middlewares • Presentation Layer
  42. Store setup

  43. Store setup

  44. Main parts of the App • State & SubStates •

    Store setup • Middlewares • Presentation Layer
  45. None
  46. Middlewares

  47. Middlewares

  48. Main parts of the App • State & SubStates •

    Store setup • Middlewares • Presentation Layer
  49. Presentation Layer Presentation Layer: • ScreenFactory • ViewPresenter • ViewController

  50. None
  51. Presentation Layer (ViewController)

  52. Presentation Layer (ViewPresenter)

  53. Presentation Layer (ScreenFactory)

  54. Q&A