State Management with MobX and MobX-State-Tree

State Management with Redux, Hooks + Context, and MobX-State-Tree comparison

Transcript

1. State Management with MobX and MobX-State-Tree April, 2020
2. State Management History Flux Reflux Redux Time
3. • A Predictable State Container for JS Apps - https://redux.js.org/ • Bastante popular en la comunidad, alrededor de 5MM de descargas semanales en npm • Influenciada por Flux Redux Redux evolves the ideas of Flux, but avoids its complexity by taking cues from Elm. Even if you haven't used Flux or Elm, Redux only takes a few minutes to get started with.
4. • Curva de aprendizaje. • Nuevos términos: reducer, action creator, types, dispatch. Para manejar *side effects thunk y sagas • Estructura de archivos “compleja”. Hay que editar muchos archivos para hacer algo simple. (según ha mejorado con https://redux-toolkit.js.org/) Redux Facts
5. “Algunos ponen cosas en stores globales que deberían ser locales” “El problema no es Redux es como los equipos lo usan” • Todos aplican Redux distinto: Redux Facts “Stores están diseñados para soportar un página y la data no está normalizada”
6. *Side Effects https://www.reddit.com/r/reactjs/comments/8avfej/what_does_side_effects_mean_in_react/
7. • React hooks + context reemplaza redux? No! Hooks reemplaza class components por functional components. Hooks and Context
8. Hooks and Context useContext y useReducer pudiese ser usado para manejar el estado de la aplicación, pero puede haber implicaciones de performance.
9. • MobX it’s the engine ⚙ • MobX-React wires up MobX to React for maximum performance • MobX-State-Tree (MST) “It’s like react for data ⚛, MST makes MobX a bit more like Redux” MobX + MobX-State-Tree + MobX-React
10. Let’s code a TriviaApp
11. Create a Store and Models
12. • observable An observable is an object that stores a single value. You can get or set the current value, and you can listen to it so your callback will be executed whenever the value changes. • observer Observer is used in React components to re-render automatically only when an observable value changes. Some Concepts
13. • actions Nodes can only be modified by one of their actions. • views Any fact that can be derived from your state is called a "view" or "derivation". Some Concepts
14. Fetching Questions (Actions)
15. Displaying Questions (Views)
16. • Simple? o Complejo? • Ignite Bowser (Typescript, MST) • Recomendaciones de la comunidad? • Gustos y Colores? Wrapping Out
17. Component State en Redux
18. Component State en MobX
19. • Simple? o Complejo? • Ignite Bowser (Typescript, MST) • Recomendaciones de la comunidad? • Gustos y Colores? Wrapping out
20. Ignite Bowser
21. • Simple? o Complejo? • Ignite Bowser (Typescript, MST) • Recomendaciones de la comunidad? • Gustos y Colores? Wrapping out
22. Recomendaciones de la comunidad?
23. • Simple? o Complejo? • Ignite Bowser (Typescript, MST) • Recomendaciones de la comunidad? • Gustos y Colores? Wrapping out
24. Gusto y Colores? VS
25. • Simple? o Complejo? • Ignite Bowser (Typescript, MST) • Recomendaciones de la comunidad? • Gustos y Colores? Wrapping out
26. Links de interés • React Native EU 2019 - Jamon Holmgren - Resolving the Great State Debate with Hooks, Context, and MobX-State-Tree https://youtu.be/Wx9slbOTD6Q • Concepts & Principles https://mobx.js.org/intro/concepts.html • MobX-State-Tree Overview & Philosophy https://mobx-state-tree.js.org/intro/philosophy • Ignite https://github.com/infinitered/ignite-bowser • Easy MobX and Redux Comparison https://www.leighhalliday.com/easy-mobx-redux-comparison