Skip to content

Instantly share code, notes, and snippets.

Tomáš Weiss tomkis

Block or report user

Report or block tomkis

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@tomkis
tomkis / react-router-redux.js
Last active Jan 11, 2017
react-router-redux with react-router 4.x
View react-router-redux.js
import React, { Component } from 'react';
import Match from 'react-router/Match';
import { connect } from 'react-redux';
import * as ActionTypes from '../constants/actionTypes';
import buildActionCreators from '../helpers/buildActionCreators';
const EMPTY_PROPS = {};
const createMountableComponent = (Cmp, routeId) => connect(
@tomkis
tomkis / main.js
Created Sep 2, 2016
redux-observable epic hot reloading
View main.js
// main.js
import { Subject } from 'rxjs';
import { createStore, compose, applyMiddleware } from 'redux';
import pingPongReducer from './pingPongReducer';
import pingPongEpic from './pingPongEpic';
const buildEpicSubscriber = () => {
let subscription = null;
@tomkis
tomkis / redux-saga-confirmation-dialog.js
Last active Mar 14, 2019
Implementing confirmation dialog via redux-saga
View redux-saga-confirmation-dialog.js
import { select, put, take } from 'redux-saga/effects';
function* emptySaga() {}
export function* withConfirmation(text, onConfirm, onCancel = emptySaga) {
yield put({ type: 'ShowConfirmationDialog', payload: text });
const { type } = yield take([
'ConfirmationDialogConfirmed',
'ConfirmationDialogCanceled'
@tomkis
tomkis / redux-elm-routing.js
Created Jun 2, 2016
redux-elm with react-router
View redux-elm-routing.js
///
/// <---- rootView.js
///
import { view } from 'redux-elm';
import buildRouting from './buildRouting';
export default view(({ history }) => buildRouting(history));
View rxjs-saga-auth.js
import { createStore, applyMiddleware } from 'redux';
import { Observable, Subject } from 'rxjs';
const api = type => {
console.log(`calling API ${type}`);
return new Promise(res => setTimeout(() => res(), 500));
};
const actionOrder = (actions, order) => actions.every((action, index) => action.type === order[index]);
const actionPredicate = actions => filterableAction => actions.some(action => action === filterableAction.type);
View redux-saga-problem.js
import api from './path/to/api'
import { take } from 'redux-saga'
function* watchSave() {
while(true) {
const { data } = yield take('SAVE_DATA');
// Just naive example that callbacks do not propagate yield*
yield* data
.forEach(function*(record) {
@tomkis
tomkis / rxjs-saga.js
Last active May 13, 2018
rxjs-saga.js
View rxjs-saga.js
import { createStore, applyMiddleware } from 'redux';
import { Observable, Subject } from 'rxjs';
const api = (url, fail) => {
console.log(`Loading API ${url}`);
return new Promise((res, rej) => setTimeout(() => fail ? rej(`data-${url}`) : res('SUCCESS'), 1000));
};
const customSaga = iterable =>
iterable
View address-function-vs-dispatch-action.jsx
// Current Redux way
const view = props => (
<div>
<button onClick={props.dispatch({type: 'FOO'})}>FooBar</button>
<button onClick={props.dispatch({type: 'BAR'})}>FooBar</button>
<button onClick={props.dispatch({type: 'BAZ'})}>Baz</button>
</div>
);
const store = createStore(rootReducer);
@tomkis
tomkis / reducers-as-generators.js
Created Nov 20, 2015
what if your reducers were generators?
View reducers-as-generators.js
// You can defer the side-effect execution in middlewares
const sideEffect = appState => dispatch => localStorage.setItem('counter', appState);
function plainOldReducer(appState) {
return appState + 1;
}
// Composition simply work
function nestedReducer*(appState, action) {
if (action === FOO) {
@tomkis
tomkis / routable_hoc.jsx
Created Oct 11, 2015
Routable high order component.
View routable_hoc.jsx
export default routable('/absolute/route/foo', props => <span>Foo</span>);
You can’t perform that action at this time.