Skip to content

Instantly share code, notes, and snippets.

Avatar

Mark Erikson markerikson

View GitHub Profile
@markerikson
markerikson / redux-archeology-notes.md
Last active Nov 17, 2020
Redux Archeology and Design Notes
View redux-archeology-notes.md

Design Goals

https://github.com/reactjs/redux/issues/8#issuecomment-108126858

The main goal of this library is to prove that Flux can be implemented in a way compatible with full hot reloading (and explore how this can be done). You can run the example code with npm start, change action creators or stores, and the new logic will kick in before you refresh.

@markerikson
markerikson / redux-socket-middleware-example.js
Created Jun 28, 2018
Redux socket middleware example usage
View redux-socket-middleware-example.js
const createMySocketMiddleware = (url) => {
return storeAPI => {
let socket = createMyWebsocket(url);
socket.on("message", (message) => {
storeAPI.dispatch({
type : "SOCKET_MESSAGE_RECEIVED",
payload : message
});
});
@markerikson
markerikson / reduxRandomExample.js
Created Jan 23, 2018
Redux random number middleware with resumable state
View reduxRandomExample.js
import {createStore, applyMiddleware} from"redux";
import {randomMiddleware, higherOrderRandomReducer} from "./reduxRandomMiddleware";
function randomInt(prng, lowest, highest) {
return lowest + Math.floor(prng() * (highest - lowest + 1));
}
function counterReducer(state = 0, action) {
switch(action.type) {
case "INCREMENT" : {
@markerikson
markerikson / NotificationManager.jsx
Created Jan 21, 2018
React / Redux / Semantic-UI toast notifications implementation
View NotificationManager.jsx
import React, {Component} from "react";
import {connect} from "react-redux";
import _ from "lodash";
import { Message } from "semantic-ui-react";
import {Portal} from 'react-portal';
import {selectNotifications} from "./notificationSelectors";
import {dismissNotification} from "./notificationActions";
@markerikson
markerikson / reselect-selectors-memoization.md
Last active Apr 14, 2018
Reselect selectors and memoization explanation
View reselect-selectors-memoization.md

[9:39 PM] suark: A selector is a function that takes only 1 param which is state and it returns data.
[9:40 PM] maladr0it: in my case it can't function with only that information
[9:40 PM] maladr0it: so i should perhaps rethink
[9:40 PM] maladr0it: it needs to know what chat to get messages for
[9:40 PM] acemarke: @suark: a selector can take any number of arguments
[9:40 PM] acemarke: both in general, and with Reselect specifically
[9:41 PM] suark: I thought createselect returns a function that only takes state
[9:41 PM] acemarke: nope
[9:41 PM] acemarke: in fact, it calls all "input selectors" with all the arguments you pass in
[9:41 PM] maladr0it: only taking state sounds very limiting.. perhaps i should read about what selectors actually are used for

@markerikson
markerikson / ampersand-shims.js
Created Dec 12, 2017
Backbone / Ampersand compatibility shims
View ampersand-shims.js
// Ampersand-State doesn't mix in Underscore methods the way Backbone.Model does.
// Technically it could also be done as a standalone mixin, but we'll do that here.
var modelMethods = ['keys', 'values', 'pairs', 'invert', 'pick', 'omit'];
// Mix in each Underscore method as a proxy to `Model#attributes`.
_.each(modelMethods, function(method) {
State.prototype[method] = function() {
var args = [].slice.call(arguments);
args.unshift(this.attributes);
@markerikson
markerikson / usage.js
Last active Jan 30, 2020
Backbone/React Interop
View usage.js
import {viewFromComponent} from "viewUtilities";
class MyListComponent extends React.Component {
render() {
// serialized Backbone collection
const {items = [] } this.props;
// do stuff with items
}
}
@markerikson
markerikson / reactiflux-package-deps-offline-mirrors.md
Created Oct 1, 2017
Reactiflux discussion: handling package dependencies with offline mirrors
View reactiflux-package-deps-offline-mirrors.md

[1:11 PM] jswannabe: Question regarding npm. I had a debate last week with someone at work regarding npm update. I don't like running it since the latest updates from 3rd party libs/modules that my webapp might get might break. There is another dev who's on my side. However, there is another dev that likes running npm update. Our boss likes it too and says that we should always get the latest changes from 3rd parties. For me, I'd rather run npm update on a test branch first and if it's been proven not to break our app, that's the time we'll introduce the new version. It's been an ongoing debate for months now, LMAO! How are you folks doing it at work?(edited)
[1:14 PM] acemarke: My personal suggestion would be that you don't just randomly update libs
[1:14 PM] acemarke: I would agree it's better to do it on a test branch first
[1:14 PM] mruzekw: If they respect semver, there shouldn't be breaking changes? I could be wrong
[1:15 PM] acemarke: that's the theory, but in practice, thi

@markerikson
markerikson / reactiflux-actions-action-creators-mapDispatch.md
Last active Apr 14, 2018
Reactiflux chat: Dispatching actions, using reducers, action creators, and mapDispatchToProps
View reactiflux-actions-action-creators-mapDispatch.md

[10:39 AM] infected mushroom: Is this analogy correct?

Can we say that the store in the Redux app is like a database?
mapStateToProps is used to retrive (read) the information from the database where as
mapDispatchToProps is used to write the information in the same database?
[10:59 AM] infected mushroom: Okay, I am confused now

On official docs it says

Actions are payloads of information that send data from your application to your store

@markerikson
markerikson / ReactControlledInputWithState.jsx
Created Aug 2, 2017
React controlled input with internal state example
View ReactControlledInputWithState.jsx
class ControlledInputWithInternalState extends Component {
constructor(props) {
super(props);
this.state = {
isValid : true,
value : props.value
};
}