Skip to content

Instantly share code, notes, and snippets.

Avatar

Mark Erikson markerikson

View GitHub Profile
@markerikson
markerikson / discordTweaks.css
Last active Feb 26, 2021
Discord CSS tweaks
View discordTweaks.css
@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 {
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
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
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
markerikson / redux-boilerplate-thoughts.md
Last active Oct 3, 2016
Reasons for Redux "boilerplate"
View redux-boilerplate-thoughts.md

[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 Jan 30, 2021
jdubray statements on Redux
View jdubray-gitter-logs.md

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
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
markerikson / actions.js
Created May 2, 2016
Redux-ORM tree data sample
View actions.js
import {
schema,
getModelByType,
} 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"});
myAjaxLib.post("/someEndpoint", {data : someValue})
.then(
response => dispatch({type : "REQUEST_SUCCEEDED", payload : response}),
error => dispatch({type : "REQUEST_FAILED", error : error})
);