Skip to content

Instantly share code, notes, and snippets.


Mark Erikson markerikson

View GitHub Profile
markerikson / discordTweaks.css
Last active Feb 26, 2021
Discord CSS tweaks
View discordTweaks.css
@namespace url(;
Hides Discord elements which aren't needed if you're using it solely for
Reactiflux text chat.
@-moz-document domain("") {
/* Allow text selection ಠ_ಠ */
body {
View FormContentsContainer.jsx
import React, {Component} from 'react';
import {bindActionCreators} from "redux"
import { connect } from 'react-redux';
import {schema, getModelByType} from "models/models"
import SomeFormComponent from "SomeFormComponent"
import {selectedItemSelector, isEditingSelector} from "selectors/entities"
let mapStateToProps = (state) => {
markerikson / Counter.jsx
Last active Feb 21, 2016
Sample unit testing with Chai-Enzyme
View Counter.jsx
import React, {Component} from "react";
import {connect, Provider} from "react-redux";
import autoBind from 'react-autobind';
import Box, {Container, VBox, Page} from "react-layout-components"
import fireflyIcon from "./Firefly.png";
import {INCREMENT_COUNTER, DECREMENT_COUNTER} from "../constants/ActionTypes"
markerikson / connectExample.js
Last active Jun 9, 2021
React-Redux connect example
View connectExample.js
import {action1, action2} from "myActions";
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
const mapStateToProps = (state, ownProps) = {
return {
counter : state.counter,
someComponentValue : state.things[ownProps.someIdProp]
View reduxActionBindingExample.js
import {action1, action2} from "myActions";
import {bindActionCreators} from "redux";
const mapDispatchToProps(dispatch) => {
return {
manuallyBoundAction : (...args) => dispatch(action1(...args)),
autoBoundAction : bindActionCreators(action2, dispatch),
multipleActionsTogether : bindActionCreators({action1, action2}, dispatch)
markerikson /
Last active Oct 3, 2016
Reasons for Redux "boilerplate"

[9:24 PM] acemarke: the typical complaints are things like switch statements, having to touch multiple files for actions vs constants vs reducers, verbosity of updating nested fields in a reducer, etc
[9:31 PM] acemarke: most of the "ceremony" and "boilerplate" and Redux exists for one of two reasons
[9:32 PM] acemarke: either because it's effectively a prerequisite for Redux's main capabilities and selling points
[9:32 PM] acemarke: or because it's good software engineering practices
[9:32 PM] acemarke: for example:
[9:32 PM] acemarke: * actions and state should be serializable because that enables "time-travel debugging"
[9:33 PM] acemarke: * data should be immutable because you know you're not making accidental modifications, and because it allows very cheap shouldComponentUpdate checks with React
[9:34 PM] acemarke: * since action types need to be serializable, they should almost always be strings, because those are easier to read. And since you'll want to use them in both your reducers a

markerikson /
Last active Jan 30, 2021
jdubray statements on Redux

Jean-Jacques Dubray
Feb 06 23:05
@robwormald welcome! honored to speak to you. If you like Redux, well, SAM is the correct semantics that Redux should have had. It tried to speak to Dan about it, but he never replied to me. SAM's semantics are based on TLA+ so you can't find a more robust formalism.

Stardrive Engineering

markerikson / prepareActions.js
Created May 1, 2016
Redux prepareActions utility function
View prepareActions.js
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import {action1, action2} from "myActions";
// A reusable utility function that binds action creators
// and returns them as a prop named "actions"
function prepareActions(actions) {
return (dispatch) => ({
actions : bindActionCreators(actions, dispatch);
markerikson / actions.js
Created May 2, 2016
Redux-ORM tree data sample
View actions.js
import {
} from "models/models";
import {UPDATE_ITEM_CHECK_STATES} from "constants/items";
export const updateItemCheckState = (itemID, itemType, newCheckState) => (dispatch, getState) => {
View redux-thunk-examples.js
// The classic AJAX call - dispatch before the request, and after it comes back
function myThunkActionCreator(someValue) {
return (dispatch, getState) => {
dispatch({type : "REQUEST_STARTED"});"/someEndpoint", {data : someValue})
response => dispatch({type : "REQUEST_SUCCEEDED", payload : response}),
error => dispatch({type : "REQUEST_FAILED", error : error})