Skip to content

Instantly share code, notes, and snippets.

@gaearon
gaearon / a.js
Created May 20, 2016 20:15
Basic HMR
// change this file
module.exports = 42
@gaearon
gaearon / connect.js
Last active March 13, 2025 13:28
connect.js explained
// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
// It lets us inject component as the last step so people can use it as a decorator.
// Generally you don't need to worry about it.
return function (WrappedComponent) {
// It returns a component
return class extends React.Component {
render() {
return (
@gaearon
gaearon / fish_prompt.fish
Created May 12, 2016 14:45
/Users/dan/.config/fish/functions/fish_prompt.fish
function fish_prompt
set_color FF0
echo -n (basename $PWD)
set_color normal
echo -n $normal ') '
end
@gaearon
gaearon / LinkThatWorksWithRedux.js
Last active November 21, 2018 03:31
Drop-in replacement for React Router <Link> that works with React Redux optimizations (https://github.com/reactjs/react-router/issues/470)
// While I claim this is a drop-in replacement, it is a little bit slower.
// If you have hundreds of links, you might spend a few more milliseconds rendering the page on transitions.
// KNOWN ISSUES WITH THIS APPROACH:
// * This doesn't work great if you animate route changes with <TransitionGroup>
// because the links are going to get updated immediately during the animation.
// * This might still not update the <Link> correctly for async routes,
// as explained in https://github.com/reactjs/react-router/issues/470#issuecomment-217010985.
@gaearon
gaearon / index.js
Last active January 21, 2025 08:07
Breaking out of Redux paradigm to isolate apps
import React, { Component } from 'react'
import Subapp from './subapp/Root'
class BigApp extends Component {
render() {
return (
<div>
<Subapp />
<Subapp />
<Subapp />
@gaearon
gaearon / esnextbin.md
Created February 2, 2016 17:02
esnextbin sketch
@gaearon
gaearon / esnextbin.md
Created February 2, 2016 16:50
esnextbin sketch
function counterA(state = 0, action) {
switch (action.type) {
case 'increment':
return state + 1
case 'decrement':
return state - 1
default:
return state
}
}
@gaearon
gaearon / reducers.js
Last active December 11, 2020 14:56
How I'd do code splitting in Redux (pseudo code, not tested!)
import { combineReducers } from 'redux';
import users from './reducers/users';
import posts from './reducers/posts';
export default function createReducer(asyncReducers) {
return combineReducers({
users,
posts,
...asyncReducers
});