Skip to content

Instantly share code, notes, and snippets.

Avatar

Mark Erikson markerikson

View GitHub Profile
@markerikson
markerikson / chatsSlice.ts
Last active Apr 13, 2021
Nested `createEntityAdapter` example
View chatsSlice.ts
// Example of using multiple / nested `createEntityAdapter` calls within a single Redux Toolkit slice
interface Message {
id: string;
roomId: string;
text: string;
timestamp: string;
username: string;
}
@markerikson
markerikson / react-native-jest-google-queries.md
Last active Feb 22, 2021
Stuff I googled while updating React-Redux to run tests against React Native
View react-native-jest-google-queries.md
  • Double-checking whether window exists in React Native:
react native window global
  • Finding the giant "useLayoutEffect warnings" thread:
react uselayouteffect ssr
@markerikson
markerikson / reactiflux-chat-react-hooks-storage.md
Created Sep 14, 2019
Reactiflux chat log: How does React store hooks on Fibers?
View reactiflux-chat-react-hooks-storage.md

[12:14 AM] acreddy : are hooks value stored in fiber?

[10:40 AM] ghardin137 : not really

[10:50 AM] acemarke : @acreddy, @ghardin137 : yes they are, actually.

A "fiber" is a plain JS object that React uses to store bookkeeping information on each rendered component in the tree. The linked list of hooks is indeed stored as a field on the fiber for that component

@markerikson
markerikson / discord-split-theme-userscript.js
Last active Sep 10, 2019
Discord: Split Theme Userscript (Dark Sidebar, Light Chat)
View discord-split-theme-userscript.js
// ==UserScript==
// @name Discord Split Dark+Light Theme
// @version 1
// @match https://discordapp.com/*
// @grant none
// ==/UserScript==
// NOTE: Set Discord to the Light theme. This will override the sidebar and
// "guilds" sections to force them to the dark theme.
@markerikson
markerikson / fixMissingOfflineMirrorFiles.py
Created Aug 28, 2019
Python script to download missing files in a Yarn offline mirror
View fixMissingOfflineMirrorFiles.py
# coding=utf-8
import sys
import re
import requests
if(sys.version_info.major < 3):
print("This script must be run with Python 3.6 or higher!")
exit(1)
import pathlib
@markerikson
markerikson / dialogsRegistry.ts
Created Jul 15, 2019
Redux middleware typing issues
View dialogsRegistry.ts
import React, {ComponentType} from "React";
import {Middleware, Action, AnyAction} from "redux";
import {createSlice, PayloadAction} from "redux-starter-kit";
import {createSelector} from "reselect";
import {generateUUID} from "utilities";
import {RootState} from "store";
interface DialogDisplayOptions {
singleton: boolean;
@markerikson
markerikson / react-redux-stale-props-subscriptions.md
Created Apr 16, 2019
Reactiflux chat log: React-Redux, "stale props", and subscriptions
View react-redux-stale-props-subscriptions.md

[9:13 PM] harry : @acemarke are people still going to need to add Connect components to their jsx to use a redux hook? i couldnt tell where that ended up
[9:13 PM] harry : didnt 100% grok the whole thing
[9:13 PM] acemarke : awright, lemme recap the issue
[9:13 PM] acemarke : :)
[9:13 PM] harry : sweet
[9:13 PM] acemarke : from the top
[9:13 PM] harry : i kinda got the gist of the zombie child thing too. not sure how a child actually subscribes before a parent, though
[9:14 PM] acemarke : (drat... I can already tell this is gonna be one of those chats I have to export to a gist because I'm about to write a lot)
[9:15 PM] acemarke : up through v4, there was a potential bug due to the timing of store subscriptions
[9:15 PM] acemarke : wrapper components subscribe in componentDidMount, which fires bottom-up

@markerikson
markerikson / react-redux-v7-batching-notes.md
Created Apr 7, 2019
Discussion: Batching behavior in React-Redux v7
View react-redux-v7-batching-notes.md

[10:22 PM] acemarke : @noj yo. so picking up the conversation from Twitter
[10:22 PM] acemarke : you were asking what exactly the use of unstable_batchedUpdates() does and how that comes into play
[10:22 PM] noj : hey, so i was wondering how the batching story works w/ react redux v7
[10:22 PM] noj : yes
[10:22 PM] noj : so a wrinkle is i use redux-saga
[10:22 PM] acemarke : and how that relates to things like dispatching in sagas
[10:22 PM] acemarke : yup
[10:22 PM] noj : mostly of the form
[10:23 PM] noj : i have a saga listenening for an action and doing some other actions as a side effect, or often making an rpc call and then some more actions
[10:23 PM] noj : i was wondering if a chain of side effects dispatches n actions

@markerikson
markerikson / babel-plugin-reexport-named-as-default.js
Created Nov 1, 2018
babel-plugin-reexport-named-as-default
View babel-plugin-reexport-named-as-default.js
// This file totally hacked together from https://github.com/jfeldstein/babel-plugin-export-default-module-exports
module.exports = ({types : t}) => ({
visitor: {
Program: {
exit (path) {
if (path.BABEL_PLUGIN_EXPORT_DEFAULT_MODULE_EXPORTS) {
return
}
let hasExportDefault = false
@markerikson
markerikson / http-data-fetching.md
Last active Sep 13, 2018
HTTP data fetching steps and terms
View http-data-fetching.md

[11:45 PM] someuser : how can I pull data from mysql database using react js?
[11:46 PM] BTM : @someuser short answer - "you can't"
[11:46 PM] connor : have react hit a proxied api that makes request using mysql
[11:46 PM] connor : using fetch or axios
[11:46 PM] someuser : the package has apollo in it
[11:46 PM] BTM : You need an API that will expose the data from sql as REST, graphql etc.
[11:46 PM] someuser : whats the apollo for?
[11:46 PM] someuser : im confused between graphql, apollo and redux.
[11:46 PM] acemarke : okay, let me explain
[11:47 PM] acemarke : first: no matter what UI framework you're using, here's the basic data flow