Skip to content

Instantly share code, notes, and snippets.

@bradennapier
bradennapier / errorObserver.js
Last active June 15, 2017 23:34
Error Event and Promise Rejection Monitor via Saga and saga-event-observer
import { call } from 'redux-saga/effects'
import eventObserverSaga from 'saga-event-observer'
/*
handlers looks something like this:
this.eventHandlers = {
onEvent: [ this, this.handleEvent ],
onError: [ this, this.handleError ],
onCancel: [ this, this.handleCancel ],
@bradennapier
bradennapier / redux-saga-process-geolocation.js
Created June 15, 2017 23:56
Geolocation with Redux-Saga-Process
import { Process } from 'redux-saga-process'
import { call, put } from 'redux-saga/effects'
import { createSelector } from 'reselect'
import { createTaskManager } from 'saga-task-manager'
import startUserPositionObserver from 'saga-geolocation-observer'
import handleUserPosition from './sagas/handleUserPosition'
@bradennapier
bradennapier / async-redux-saga-process.js
Last active June 19, 2017 04:56
redux-saga process with code-splitting & hot reloading
import { Process } from 'redux-saga-process';
import { call, put } from 'redux-saga/effects';
import { createSelector } from 'reselect';
import { createTaskManager } from 'saga-task-manager';
import startUserPositionObserver from 'saga-geolocation-observer';
import handleUserPosition from './sagas/handleUserPosition';
@bradennapier
bradennapier / redux-css.js
Created June 17, 2017 20:40
redux-css simple example
import { createStore, applyMiddleware, compose } from 'redux'
import reduxCSS from 'redux-css'
import reducers from './reducers'
/*
initial styles are the variables that we should set immediately.
Note that '--' is optional, it will be added for you if you don't
include it.
Objects are flattened { myKey: { myNested: 'red' } } -> --myKeymyNested: red
@bradennapier
bradennapier / async-process.js
Created June 19, 2017 04:53
Asynchronous Redux-Saga-Process
import { Process } from 'redux-saga-process';
const build_config = config => ({
pid: 'async',
exports: ['actions', 'selectors'],
log: false,
...config,
});
const loadProcessOnAction = 'AUTH_SESSION';
export default {
// The main routes expects an object rather than an array. We can use this
// to configure the routes and how they will behave.
// When we are attempting to render a secured route the onSecureRequest will
// be called. This should provide a promise that resolves to a SecurityProvider
// component which will wrap any secure routes.
//
// As we nest routes, new onSecureRequest properties will be used if provided, otherwise
// any secure routes will use the first onSecureRequest
@bradennapier
bradennapier / process-example.js
Last active June 19, 2017 06:34
Process Example posts
import { Process } from 'redux-saga-process';
import { put, call } from 'redux-saga/effects';
const build_config = config => ({
reduces: 'posts',
pid: 'posts',
exports: ['actions', 'selectors'],
log: false,
...config,
});
@bradennapier
bradennapier / process-shell.js
Created June 19, 2017 11:26
Process Shell example for Widgets
import { Process } from 'redux-saga-process';
import { call, put, select } from 'redux-saga/effects';
import { createSelector } from 'reselect';
import _ from 'lodash';
/**
* GET_DEFAULT_WIDGET_STATE
*/
const GET_DEFAULT_WIDGET_STATE = () => ({
rehydrated: false,
@bradennapier
bradennapier / ReduxSagaProcess.js
Last active June 19, 2017 23:06
A Complete Runthrough of ReduxSagaProcess's Properties and Features.
/*
A Process allows us to define a modular "Logic Component" which may
interact with our app in a variety of ways based on it's design.
Processes are given properties when configured which will define if/how
they reduce the redux state, what actions they make available to our
components, when our process should load and with what scope,
what types we want to listen for, and more.
This allows us to build truly encapsulated and re-useable application
@bradennapier
bradennapier / redux-saga-process-example.js
Created June 25, 2017 05:51
A complete example of all the options available in redux-saga-process-v2
/*
A Process allows us to define a modular "Logic Component" which may
interact with our app in a variety of ways based on it's design.
Processes are given properties when configured which will define if/how
they reduce the redux state, what actions they make available to our
components, when our process should load and with what scope,
what types we want to listen for, and more.
This allows us to build truly encapsulated and re-useable application