Skip to content

Instantly share code, notes, and snippets.

View markerikson's full-sized avatar

Mark Erikson markerikson

View GitHub Profile
@markerikson
markerikson / discordTweaks.css
Last active February 26, 2021 08:49
Discord CSS tweaks
@namespace url(http://www.w3.org/1999/xhtml);
/*
Hides Discord elements which aren't needed if you're using it solely for
Reactiflux text chat.
*/
@-moz-document domain("discordapp.com") {
/* Allow text selection ಠ_ಠ */
body {
@markerikson
markerikson / FormContentsContainer.jsx
Last active February 28, 2021 21:31
Redux form editing HOC
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
markerikson / Counter.jsx
Last active February 21, 2016 22:46
Sample unit testing with Chai-Enzyme
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
markerikson / connectExample.js
Last active March 5, 2024 01:24
React-Redux connect example
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]
};
}
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
markerikson / redux-boilerplate-thoughts.md
Last active October 3, 2016 02:40
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
markerikson / jdubray-gitter-logs.md
Last active January 30, 2021 04:09
jdubray statements on Redux

Jean-Jacques Dubray
@jdubray
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
@HighOnDrive

@markerikson
markerikson / prepareActions.js
Created May 1, 2016 20:32
Redux prepareActions utility function
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
markerikson / actions.js
Created May 2, 2016 16:53
Redux-ORM tree data sample
import {
schema,
getModelByType,
} from "models/models";
import {UPDATE_ITEM_CHECK_STATES} from "constants/items";
export const updateItemCheckState = (itemID, itemType, newCheckState) => (dispatch, getState) => {
@markerikson
markerikson / redux-thunk-examples.js
Last active September 4, 2022 11:12
Redux-Thunk examples
// The classic AJAX call - dispatch before the request, and after it comes back
function myThunkActionCreator(someValue) {
return (dispatch, getState) => {
dispatch({type : "REQUEST_STARTED"});
myAjaxLib.post("/someEndpoint", {data : someValue})
.then(
response => dispatch({type : "REQUEST_SUCCEEDED", payload : response}),
error => dispatch({type : "REQUEST_FAILED", error : error})
);