7 tips of using MobX – Huiseoul Engineering

7 tips of using MobX  #javascript #react #mobx #reactjs

  • These are the very basic building blocks of MobX:observable: is the data that you are expecting to changeobserver: is a component that you want to be re-rendered depending on the observable datacomputed values: are functions returning values based on calculation of observable valuesreactions: many different types of functions that can be executed based on observable values2.
  • In large applications this might cause confusion and make it hard to track down where the data are being changed.Strict mode will give you peace of mindSo MobX provides a strict mode where you can only change your data inside of functions marked as actions can change observable values.In strict mode, only action functions can change observable values5.
  • MobX document suggests:one store for app-wide UImultiple stores for each domainStore states in storesIt means that you might want to have UiStore or AppStore for your app-wide, UI data, and other domain stores for each of your domain like UserStore, ProductStore, BrandStore, etc.7.
  • Having MobX, and introducing new concepts and using separated stores might get your app overly-complicated otherwise simple react components talking to each other.So if you start from scratch you might try to solve the problem of state management without MobX first then start to use it if you see the clear benefit for all of your colleagues.Even after introducing MobX in your app, consider using local states for simple view-only states like isLoading or isDisabled.
  • It might be better solution than MobX if you are working with explicitly time-based data among other situations.Redux is a predictable state container for JavaScript appsHappy coding!

MobX is a convenient tool that you can use in React projects to manage states across components. Here are 7 tips we have learned along the way we have built our app at Huiseoul using MobX for our…
Continue reading “7 tips of using MobX – Huiseoul Engineering”

React-redux “connect” explained 🔗

New post! React-redux's

  • There is an entire library, called react-redux whose sole purpose is to seamlessly integrate redux’s state management into a React application.
  • Lets take a look at redux’s state management flow :

    If you have worked with redux before, you know that its functionality revolves around a “store”, which is where the state of the application lives.

  • Now, let’s come to the (simplified) component structure of a standard react todo-mvc application :

    If we want to link our React application with the redux store, we first have to let our app know that this store exists.

  • However, because of the utility that gives us, I feel it’s more appropriate to represent it as something which “wraps” the entire application tree, like this :

    Now that we have “provided” the redux store to our application, we can now connect our components to it.

  • We can either retrieve data by obtaining its current state, or change its state by dispatching an action (we only have access to the top and bottom component of the redux flow diagram shown previously).

Redux is a terribly simple library for state management, and has made working with React more manageable for everyone. However, there are a lot of cases where people blindly follow boilerplate code to integrate redux with their React application without understanding all the moving parts involved.
Continue reading “React-redux “connect” explained 🔗”

What the Flux? – Gina Yeon – Medium

What the Flux?  #flux #react #reactjs

  • It complements React’s composable view components by utilizing a unidirectional data flow.Flux has 4 major / React ComponentsThe unidirectional data flow allows Flux to shy away from the what we’re more familiar with — the MVC structure.MVC Structure and FlowWhen a user interacts with a React View, it kicks off an action through the dispatcher, to the stores that hold the data, which then updates all of the views that are affected.Flux Structure and Data FlowThe unidirectional pattern means that data flows in a single direction.
  • The action, dispatcher, store, and view are independent nodes with distinct inputs and outputs.
  • The actions are simple objects containing new data and an identifying type property.Sometimes, the views may cause a new action to be sent through the system depending on the UI.Actions are provided to the dispatcher through action creators originating from the views, through user interaction.
  • The dispatcher, acting as a central hub, will then take those actions and invoke callbacks registered by the stores and send the actions to the stores.
  • These views will listen for that change event through event handlers will call their own setState() method to then re-render themselves and all of their descendants in the component tree.Flux, with Harry PotterSeverus Snape is patrolling the halls of Hogwarts to make sure no students are out of bed.

When I first started researching Flux, it was described as an application architecture. I thought, “Great, I know architecture, this should make sense.” Little did I know, architecture in the tech…
Continue reading “What the Flux? – Gina Yeon – Medium”

How to connect MobX with a react-router?

just blogged: how to use #mobx with #reactrouter -   #reactjs #javascript

  • Thanks to the Provider component we can pass the stores object to all the child components.
  • Even if the ChildComponent component has its own children, it shouldn’t pass the whole store into them.
  • In the post about Redux I told you about the connect function and the Provider component.
  • Redux’s connect function and Provider component
  • The way, the React component attached to the route has the store available.

The second article about MobX. This time I will show you two ways of how to connect MobX with a react-router: the Redux way and by importing stores.
Continue reading “How to connect MobX with a react-router?”

Why Redux? Why Now? — Jumpcut Insights

Why Redux? Why now?  #ReactJS

  • For the frontend of Jumpcut Academy, we were using a ‘vanilla’ flux implementation with singleton stores.
  • Redux fixes that with reducers and one store.
  • We wrote thousands of lines of code in Flux and a multitude of stores and action creators.
  • The biggest advantage is that the reducers you create to manage your state can be nested (not flat like stores in flux), so you can combine reducers to build complex state structure from simple reducer functions.
  • With the Jumpcut Academy frontend, we had over 10 stores when we decided to migrate to Redux.

Read the full article, click here.

@ReactiveConf: “Why Redux? Why now? #ReactJS”

For almost a year, Jumpcut has been utilizing React and Flux for frontend development. Our experience with a ‘vanilla’ Flux implementation…

Why Redux? Why Now? — Jumpcut Insights

Introducing Provider, implements #53 by mweststrate · Pull Request #65 · mobxjs/mobx-react · GitHub

  • mweststrate commented on the diff Jun 21, 2016
  • Mweststrate referenced the pull request Jun 21, 2016
  • + `Provider` is a component that can stores (or other stuff) on React’s context.
  • Sign up for free to join this conversation on GitHub .
  • mweststrate wants to merge 7 commits into master from provider

Read the full article, click here.

@mweststrate: “Most requested feature: mobx-react Provider + connect mechanism is coming!
#MobX #reactjs”

mobx-react – React bindings for MobX

Introducing Provider, implements #53 by mweststrate · Pull Request #65 · mobxjs/mobx-react · GitHub