Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium

Mobdux: combining the good parts of MobX and Redux  #ReactJS #Redux #Mob

  • In MobX it is easy to structure your stores in a tree-like manner so that at any point you can view the entire state of your application.
  • Additionally, by using MobX in strict mode, you are forced to make any mutations to your state in actions.
  • The combination of a single store, strict mode, and the excellent mobx-react-devtools help give back some of the predictability and traceability of Redux.One of the ways the libraries significantly diverge however, is when connecting your state to your components.
  • Redux on the other hand, recommends the smart component / dumb component pairing so that each component (regardless of where it sits in the hierarchy) can look up everything it needs to render itself.I prefer the Redux approach for a number of reasons:Easier to move things around in your component…
  • Also, we can remove all knowledge of MobX from our dumb components by encapsulating all of this logic in our smart component wrapper, removing the need for the observer decorator entirely.

MobX and Redux give you two opposing ways to manage your state effectively in a React application. As an experiment I attempted to merge the good parts of both approaches, and ended up with a new…
Continue reading “Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium”

Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium

  • In MobX it is easy to structure your stores in a tree-like manner so that at any point you can view the entire state of your application.
  • Additionally, by using MobX in strict mode, you are forced to make any mutations to your state in actions.
  • The combination of a single store, strict mode, and the excellent mobx-react-devtools help give back some of the predictability and traceability of Redux.One of the ways the libraries significantly diverge however, is when connecting your state to your components.
  • Redux on the other hand, recommends the smart component / dumb component pairing so that each component (regardless of where it sits in the hierarchy) can look up everything it needs to render itself.I prefer the Redux approach for a number of reasons:Easier to move things around in your component hierarchy.No pass-through props, where a component forwards props to its children despite not needing them for its own rendering.Easier to test / re-use / write storybook stories for the dumb components that are only interested in rendering.Dumb components are completely decoupled from Redux, allowing for re-usability if the consumer decides to change state frameworks (to MobX or relay for example).
  • Also, we can remove all knowledge of MobX from our dumb components by encapsulating all of this logic in our smart component wrapper, removing the need for the observer decorator entirely.

MobX and Redux give you two opposing ways to manage your state effectively in a React application. As an experiment I attempted to merge the good parts of both approaches, and ended up with a new…
Continue reading “Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium”

Building User Interfaces with Pure Functions and Function Composition in React

Build user interfaces with pure functions and function composition in #ReactJS:  #JavaScript

  • This idea is so important in React that React 0.14 introduced Stateless Functional Components which allows the code above to be written as normal functions (and which we’ll cover more in depth later in the course).
  • Perhaps one of my favorite things about React is it’s given me a light introduction to functional programming (FP) and a fundamental piece of FP are pure functions.
  • splice is not a pure function since each time we invoke it passing in the same arguments, we get a different result.
  • Well the main reason is React’s render method needs to be a pure function and because it’s a pure function, all of the benefits of pure functions now apply to your UI as well.
  • Another reason is that it’s a good idea to get used to making your functions pure and pushing “side effects” to the boundaries of your program.

👋 I’m Tyler. I’m a Google Developer Expert and a partner at React Training where we teach React online, in person, and build OSS like React Router.
Continue reading “Building User Interfaces with Pure Functions and Function Composition in React”