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”

Redux: Persist Your State – Async LA – Medium

Redux: Persist Your State  #redux #react #reactnative #reactjs #reactjs

  • You create your store from scratch, initialize state, and maybe set some basic state based on the url (if you are in a browser).
  • But the blob could be days, weeks or years old!Redux Persist provides a consistent, performant, and structured way to persist state.If you still require more convincing, read Jani Eväkallio’s piece on offline first applications.Part 2: Architecture2.1 The Component PartsThe “persistence layer” is actually two stateful reactive objects, plus a higher…
  • It also creates register and rehydrate methods which will be used to register each persistoid, and dispatch the actual rehydrate action respectively.PersistoidThe persistoid is the actual state sink.
  • additionally it handles the PURGE action for clearing stored state.2.2 Whats new in Redux Persist v5code splitting reducersbetter integration story for libs (e.g. redux-offline)ability to colocate persistence rules with the reducer it pertains tofirst class migration supportenable PersistGate react component which blocks rendering until persistence is complete (and enables similar patterns…
  • Thats means a consistent story around extensibility, and the ability to use redux-devtools to debug any tricky issues internal to the persistence layer.Ergonomic ReduxVanilla Redux requires a ton of ceremony to use.

When your app reloads, the javascript process has nothing in memory. You create your store from scratch, initialize state, and maybe set some basic state based on the url (if you are in a browser)…
Continue reading “Redux: Persist Your State – Async LA – Medium”

Crawling Websites in React-Native

  • Normally you would have to set up a server that crawls the target website and turns it into an API that you can use, but when you can access all data from all websites inside your client, you can save time.
  • You want to show all products of a page and a way to load the next, but you want it in our own data structure, so you can build your own UI around it.
  • The data is inside the HTML, but it’s a string.
  • The naive approach would be to use a regular expression to parse the string and get the data, but HTML doesn’t have a regular grammar so that wouldn’t work.
  • After the data has been extracted from the HTML, we can start to reshape it for our use-cases.

From the dev.to() community. Sharing ideas that makes us all better developers.
Continue reading “Crawling Websites in React-Native”

With styled-components into the future – 💅 styled-components – Medium

With styled-components into the future  #styledcomponents #react #cssinjs #css #reactjs

  • Those remain the same and intact.While this sounds like no more can be achieved from a library that was mostly about best practices and common patterns in CSS, we are still in a position to drive change in the community.And this is because of the ecosystem that people have created…
  • Even more so with our new docs that we’ve published a few months ago.But the real question is, what makes it the library you know and love?There’s a lot of great content and talks from both Max and Glen, so if you’re new to what the ideas of the library are,…
  • [1]Then we have to transform the CSS to be able to inject it [2], and finally inject your CSS into the stylesheet, at the position that we’ve marked earlier.In v2 and onwards we’ve focused a lot on optimising all of the different steps involved here for performance, but one step…
  • The idea that becomes increasingly important here is, that we can’t build a library that works for some special use cases, but what we can build is a CSS infrastructure that allows you to change the CSS yourself.Let’s see how we could approach this.The interesting thing is that with v1…
  • We can run our transformations during Babel’s transpilation, or during build-time in general.We can build a CSS-in-JS pipeline!This would result in nothing being shipped to the runtime, and as long as we can provide an “opt-in” system, you would still be able to decide whether you’d like to ship the…

styled-components has changed a lot in its past. And we are not even done yet!
Continue reading “With styled-components into the future – 💅 styled-components – Medium”

Cosmic JS Blog Stay tuned for feature roll-outs, news and updates as we continue to help you manage content for your websites and applications faster and easier.

  • In this tutorial, I’m going to show you how to create a simple Sticky Notes app using React, Redux, Selectors, Redux Sagas, a little bit of Node, and Cosmic JS.
  • For the sake of understanding how to consume Restful API’s, this tutorial will show how to make AJAX (XHR) requests to the Cosmic JS API in order to retrieve, add, update, and delete data/media in our Cosmic JS Buckets.
  • The bundle.js file located in our dist directory is what our webpack.config file will spit out after bundling all of our react components.
  • Request uses whatwg-fetch to hit AJAX requests to the Cosmic JS API.
  • This util is used to call those endpoints which are not present in the Cosmic JS package e.g deleteMedia and searchObjects based on filters – – Cosmic JS uses cosmicjs package to hit AJAX request to Cosmic API.

Cosmic JS is a cloud-hosted content platform that offers a flexible and intuitive CMS API. Build websites and applications with more freedom and manage content easier. Get started for Free.
Continue reading “Cosmic JS Blog Stay tuned for feature roll-outs, news and updates as we continue to help you manage content for your websites and applications faster and easier.”

When to use Component or PureComponent – codeburst

When to use Component or PureComponent:  #ReactJS

  • Thus, the component will re-render by default whenever shouldComponentUpdate is called.Shallow Comparison 101When comparing previous props and state to next, a shallow comparison will check that primitives have the same value (eg, 1 equals 1 or that true equals true) and that the references are the same between more complex javascript values like objects and arrays.Never MUTATEYou’ve probably been hearing not to mutate objects and arrays in props and state.
  • Although the values have changed upstream, the child would be comparing the reference to the previous props and not detect a difference.Instead, return new objects when you make a change by either leveraging es6 for object and array spreading or using a library to enforce immutability.Are there a performance issues?Comparing primitives and object references is an incredibly cheap operation.
  • If you have a list of child objects and one of the children updates, doing a check on their props and state is lightning fast compared to the cost of re-rendering each one.Other ways you could slip upDon’t bind values in functions in renderSay you have a list of items, each passing a unique parameter to parent method.
  • CommentItem likeComment={this.likeComment} userID={user.id} /Then in the child component create a class method that will reference its props:class CommentItem extends PureComponent { … handleLike() { } …}Don’t derive data in the render methodConsider a list of articles from which your profile component will display the user’s 10 most liked pieces.render() { const { posts } = this.props const topTen = posts.sort((a, b) = b.likes – a.likes).
  • slice(0, 9) return //…}topTen will have a brand new reference each time the component re-renders, even if posts hasn’t changed and the derived data is the same.

I switched to using PureComponent awhile back on the premise of it being a more performant version of Component. This turned out to be true, but the performance gains come with a few strings attached…
Continue reading “When to use Component or PureComponent – codeburst”

Beginner’s guide to react/redux —painting a mental model

  • I highly recommend anyone starting out with Redux to read the core concepts outlined in the official documentation.Long story short, Redux application has a plain object, known as store, which serves as data model for your app.
  • For example, for a list of articles, I can have an article state that looks like this:state = { articles: [{ “id”: 314, “title”: “6 innovative apps utilizing the ethereum network”, “source”: “Investopedia‎”, “link”: “date”: “1500523200”, “type”: “msm” }, { “id”: 893, “title”: “what is plasma and how will it strengthen…”, “source”: “Investopedia‎”, “link”: “date”: “1502856000”, “type”: “msm” },.
  • In our article example, fetching articles is an action that looks that this:{ type: ‘ARTICLES_FETCHED’, payload: [{ “id”: 314, “title”: “6 innovative apps utilizing the ethereum network”, “source”: “Investopedia‎”, “link”: “date”: “1500523200”, “type”: “msm” }, { “id”: 893, “title”: “what is plasma and how will it strengthen…”, “source”: “Investopedia‎”, “link”: “date”: “1502856000”, “type”: “msm” },.
  • In our article example, the reducer looks like this:const initialState = { articlesById: null,}export default function(state = initialState, action) { switch (action.type) { case types.ARTICLES_FETCHED: return { …state, articlesById: action.articlesById } default: return initialState }}To summarize the basic ideas of Redux:it describes state as plain objects, and store (global state) by merging all the states in your app.it describes changes to the app as plain objects.it uses pure functions to handle changes.The redux API then bridges your redux logics with react views while providing some utilities to compose states.Say we send a request to a remote server and fetch some articles.
  • The reducer evaluates the action and store the payload articles in the state.

Disclaimer: This article is written by a beginner trying to comb through new concepts she just learned. React/Redux is the hottest frontend frameworks these day. If you google the term Redux diagram…
Continue reading “Beginner’s guide to react/redux —painting a mental model”