Intro to DispatchingStore and the new Hoppscotch State System

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • Postwoman

    👽 Open source API development ecosystem - https://hoppscotch.io

    Another notable behaviour due the way how the store works currently is how these 'detached' systems need to be explicitly informed by the UI to perform updates. For example, Hoppscotch does syncing which is powered by Firebase (via Firestore). To make it easy to mock and to catch bugs easily, the entire implementation of what we are doing with Firestore is implemented on a single file named fb.js. It can independently manage firebase related stuff as Firebase is globally accessible as a whole on the app and provide listeners to hook into relevant info. But fb.js code can't listen to the store or even access it and hence, whenever some change is made from the UI, to reflect that onto Firestore, we have to manually perform the action from the component responsible for the interaction. This leads to code repetition and can also prove to be prone to mistakes as that is code we have to write and hope not to forget or get wrong.

  • TypeScript-Website

    The Website and web infrastructure for learning TypeScript

    Here is the entire implementation of the store. It is written in TypeScript.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • vuex

    🗃️ Centralized State Management for Vue.js.

    Like almost every other Vue powered web app. Hoppscotch uses Vuex for state management. Now, Vuex is pretty cool. We dispatch actions which commit mutations and those mutations mutate the state which is detected by Vue's observable system which in turn updates the UI. This allows for pretty transparent usage of the store from within the Vue components. In Hoppscotch, every Vue component can access the store from the $store property. This pretty much ties the store and the state stored in it to the UI. Only the UI components can directly access the store.

  • Vue.js

    This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

    Hoppscotch is (as of writing this post) a collection of around 121 Vue components working to provide the powerful yet simple experience to the user for building, experimenting and testing their REST, GraphQL and Realtime APIs. Due to the nature of the functionality of Hoppscotch being a lot more data level with many background features like history and collection syncing, integration with the browser extension and many other integration, our code is more heavy on the background. By background I mean, code which doesn't directly relate with the operations and interactions from the UI.

  • React

    The library for web and native user interfaces.

    This property of Vuex to keep the store accessible only from the UI properly and the fact the Hoppscotch is a lot more background heavy webapp leads to an issue what I like to call 'state drilling'. The term is a derivative of the term 'prop drilling'. Prop Drilling is a phenomenon in React where we keep passing down the data through props of intermediary components just so that a deeply nested child can access the data. In case of Hoppscotch, we end up with the situation where the background helper code needs to access maybe a setting or a configuration from the store and since they can't access them on their own, the UI has to pass it from the triggering code. An example for this can be seen from the network strategies bit of the code. Network Strategies system exists to abstract out to the UI how the API request is actually ran, whether it is passed to the Hoppscotch proxy or is it running through the browser extension. Network Strategies needs to know whether the proxy or extension is enabled in order to route the request through them. This is present in the settings data of the app, which is exposed via the Vuex store. Since, the strategies code can't access those states. The state has to be passed down to the component so that it can be used.

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts