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”

Using React and Redux to Create a Mapping Plugin

How to use @reactjs and Redux to create a #mapping plugin

  • Map services in the layer selector are represented by an immutable tree structure, populated from a static JSON configuration file.
  • Regional Planning is one such plugin created by Azavea for the GeositeFramework.
  • done(function(data) { serviceData.set(serviceUrl, data); redraw(); });
  • The article presents a high level technical overview for the implementation of the Regional Planning plugin for the Coastal Resilience GeositeFramework .
  • We were able to translate our knowledge of React design patterns and best practices to develop the Regional Planning plugin for the GeositeFramework.

Lessons learned from our experience with React and Redux to create the Regional Planning plugin for the Coastal Resilience GeositeFramework.
Continue reading “Using React and Redux to Create a Mapping Plugin”

5 useful tips for real-world Redux

5 useful tips for real-world #Redux 4. Catch and dispatch exceptions from reducers #reactjs

  • 1. Use a getters reducer to isolate the state shape
  • More generally, even if each reducer guarantees its own local consistency, you can still end up with an inconsistent state by looking at the Redux state as a whole.
  • As our application grew in complexity, and as we added more and more reducers, we found it increasingly difficult to guarantee that all reducers were working together correctly to create a consistent and valid state shape.
  • The idea of the getters reducer is to create a centralized set of getters available to the entire application.
  • We have found that simply glancing over a reducer’s implementation isn’t enough to understand the state shape that it is responsible for, so, we felt that some additional documentation was needed.

Read the full article, click here.


@MovioHQ: “5 useful tips for real-world #Redux 4. Catch and dispatch exceptions from reducers #reactjs”


Here are five useful tips for real-word Redux.


5 useful tips for real-world Redux