Skip to content

Instantly share code, notes, and snippets.

Yassine Elouafi yelouafi

Block or report user

Report or block yelouafi

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
View redux-models.md

Motivation

In Redux, reducer composition with combineReducers offers a powerful way to handle complex update logic of an application. A reducer can encapsulate all the ways a part of the state is mutated because it can react to multiple types of actions.

But in some cases there is also a need for another type of factoring: often the update logic is simple (for example setting a single value), and the there are many places in the state shape where the update logic is the same.

@yelouafi
yelouafi / Counter.jsx
Last active Oct 5, 2016
redux-saga with vanilla React
View Counter.jsx
import React, { Component } from 'react'
import { runSaga, delay } from 'redux-saga'
import { take, put, call } from 'redux-saga/effects'
// helper functions
const bindFunc = (comp, method) => (...args) => method.apply(comp, args)
const bindSaga = (comp, method) => (...args) => runSaga(method.apply(comp, args), {})
export default class Counter extends React.Component {
View do-notation.sjs
syntax seq = function (ctx) {
let monad = ctx.next().value;
let bodyCtx = ctx.next().value.inner();
function next() {
let result
let n = bodyCtx.next()
if(n.done) return #``
View data-driven.js
// Getter a :: () -> a
// gmap :: ((a -> b), Getter a), Getter b
function gmap(fn, getter) {
return () => fn(getter())
}
// gcombine2 :: ((a,b) -> c, Getter a, Getter ab) -> Getter c
function gcombine2(fn, getter1, getter2) {
@yelouafi
yelouafi / redux-obs-tree.html
Last active May 16, 2016
Observable state tree
View redux-obs-tree.html
<!DOCTYPE html>
<html>
<head>
<title>Redux basic example</title>
<script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
<script src="redux-dirty.js" charset="utf-8"></script>
</head>
<body>
<script>
View rawc.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Raw DOM Nostalgia</title>
<style>
.done {
text-decoration: line-through;
}
</style>
View model-helpers.js
"use strict"
const assign = Object.assign
function push(arr, item) {
let newArr = (arr && arr.slice()) || []
newArr.push(item)
return newArr
}
View rocketLauncher.html
<!DOCTYPE html>
<html>
<head>
<title>Redux rocket launcher example</title>
<script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
<script src="https://npmcdn.com/redux-saga@0.9.1/dist/redux-saga.js"></script>
</head>
<body>
<p>
Example created to compare Redux + redux-saga implementation with
@yelouafi
yelouafi / redux-actions-spec.js
Last active Feb 3, 2016
redux actions specs
View redux-actions-spec.js
const empty = {}
const ktrue = () => true
const contract = p => (v, field) => {
if(p(v, field))
return v
throw `Invalid value ${v} for field ${field}`
}
// builtin validators
View test-runSaga.js
import { createStore, applyMiddleware } from 'redux'
import sagaMiddleware, { runSaga, storeIO, take, put } from 'redux-saga'
///////////////////////////////////////////////////////////////////
//
// Sagas
//
You can’t perform that action at this time.