[Functional Programming ADT] Create State ADT Based Reducers (applyTo, Maybe)

The typical Redux Reducer is function that takes in the previous state and an action and uses a switch case to determine how to transition the provided State. We can take advantage of the Action Names being Strings and replace the typical switch case with a JavaScript Object that pairs our State ADT reducers with their actions.

We can also take care of the case in which a reducer does not have an implementation for a given action, by reaching for the Maybe data type and updating our main Redux reducer to handle the case for us, by providing the previous state untouched. And all of this can be captured in a simple helper function we can use in all of our reducer files.

 

This post will focus on how to do reducer pattern, not the functionalities details, all the functionalities codes are listed here:

const {prop, isSameType, State, when, assign, omit, curry, converge,map, composeK, liftA2, equals, constant,option, chain, mapProps, find, propEq, isNumber, compose, safe} = require('crocks');
const  {get, modify, of} = State; 

const state = {
    cards: [
        {id: 'green-square', color: 'green', shape: 'square'},
        {id: 'orange-square', color: 'orange', shape: 'square'},
        {id: 'blue-triangle', color: 'blue', shape: 'triangle'}
    ],
    hint: {
        color: 'green',
        shape: 'square'
    },
    isCorrect: null,
    rank: 4,
    left: 8,
    moves: 0
}
const inc = x => x + 1;
const dec = x => x - 1;
const incOrDec = b => b ? dec :  inc;
const clamp = (min, max) => x => Math.min(Math.max(min, x), max);
const clampAfter = curry((min, max, fn) => compose(clamp(min, max), fn))
const limitRank = clampAfter(0, 4);
const over = (key, fn) => modify(mapProps({[key]: fn}))
const getState = key => get(prop(key));
const liftState = fn => compose(
    of,
    fn
)
const limitMoves = clampAfter(0, 8);
const decLeft = () => over("left", limitMoves(dec));
const incMoves = () => over("moves", limitMoves(inc));
const assignBy = (pred, obj) =>
  when(pred, assign(obj));
const applyMove =
  composeK(decLeft, incMoves)

const getCard = id => getState('cards')
    .map(chain(find(propEq('id', id))))
    .map(option({}))
const getHint = () => getState('hint')
    .map(option({}))
const cardToHint = composeK(
    liftState(omit(['id'])),
    getCard
)
const validateAnswer = converge(
    liftA2(equals),
    cardToHint,
    getHint
)
const setIsCorrect = b => over('isCorrect', constant(b));
const adjustRank = compose(limitRank, incOrDec);
const updateRank = b => over('rank', adjustRank(b));
const applyFeedback = converge(
    liftA2(constant),
    setIsCorrect,
    updateRank
)
const markSelected = id =>
  assignBy(propEq('id', id), { selected: true })
const selectCard = id =>
  over('cards', map(markSelected(id)))
const answer = composeK(
    applyMove,
    selectCard
) 
const feedback = composeK(
    applyFeedback,
    validateAnswer
)

 

For now, the reducer pattern was implemented like this:

// Action a :: {type: string, payload: a}
// createAction :: String -> a -> Action a
const createAction = type => payload => ({type, payload});
const SELECT_CARD = 'SELECT_CARD';
const SHOW_FEEDBACK = 'SHOW_FEEDBACK';
const selectCardAction = createAction(SELECT_CARD);
const showFeedbackAction = createAction(SHOW_FEEDBACK);

// reducer :: (State, a) -> (State AppState ()) | Null
const reducer = (prevState, {type, payload}) => {
    let result;
    switch(type) {
        case SELECT_CARD:
            result = answer(payload);
            break;
        case SHOW_FEEDBACK:
            result = feedback(payload);
            break;            
        default: 
            result = null;   
    }

    return isSameType(State, result) ? result.execWith(prevState): prevState;
}

console.log(
    reducer(
        state,
        showFeedbackAction('green-square')
    )
)

 

Instead of using 'Switch', we can use Object to do the reducer:

const actionReducer= {
    SELECT_CARD: answer,
    SHOW_FEEDBACK: feedback
}

const turn = ({type, payload}) => (actionReducer[type] || Function.prototype)(payload);

const reducer = (prevState, action) => {
    const result = turn(action);
    return isSameType(State, result) ? result.execWith(prevState) : prevState;
}

'Function.prototype' makes sure that it always return a function can accept payload as param, just it do nothing and return undefined.

 

And code:

(actionReducer[type] || Function.prototype)

it is prefect for Maybe type, so we can continue with refactoring with Maybe:

const createReducer = actionReducer => ({type, payload}) => 
    prop(type, actionReducer)  // safe check type exists on actionReducer
        .map(applyTo(payload)) // we get back a function need to call with payload, using applyTo 
const turn = createReducer({
    SELECT_CARD: answer,
    SHOW_FEEDBACK: feedback
}) 

const reducer = (prevState, action) => {
    return turn(action)
        .chain(safe(isSameType(State))) // check result is the same type as State
        .map(execWith(prevState))       // run with execWith
        .option(prevState);             // unwrap Just and provide default value
    
};

 

---

 

const {prop, execWith, applyTo, isSameType, State, when, assign, omit, curry, converge,map, composeK, liftA2, equals, constant,option, chain, mapProps, find, propEq, isNumber, compose, safe} = require('crocks');
const  {get, modify, of} = State; 

const state = {
    cards: [
        {id: 'green-square', color: 'green', shape: 'square'},
        {id: 'orange-square', color: 'orange', shape: 'square'},
        {id: 'blue-triangle', color: 'blue', shape: 'triangle'}
    ],
    hint: {
        color: 'green',
        shape: 'square'
    },
    isCorrect: null,
    rank: 4,
    left: 8,
    moves: 0
}
const inc = x => x + 1;
const dec = x => x - 1;
const incOrDec = b => b ? dec :  inc;
const clamp = (min, max) => x => Math.min(Math.max(min, x), max);
const clampAfter = curry((min, max, fn) => compose(clamp(min, max), fn))
const limitRank = clampAfter(0, 4);
const over = (key, fn) => modify(mapProps({[key]: fn}))
const getState = key => get(prop(key));
const liftState = fn => compose(
    of,
    fn
)
const limitMoves = clampAfter(0, 8);
const decLeft = () => over("left", limitMoves(dec));
const incMoves = () => over("moves", limitMoves(inc));
const assignBy = (pred, obj) =>
  when(pred, assign(obj));
const applyMove =
  composeK(decLeft, incMoves)

const getCard = id => getState('cards')
    .map(chain(find(propEq('id', id))))
    .map(option({}))
const getHint = () => getState('hint')
    .map(option({}))
const cardToHint = composeK(
    liftState(omit(['id'])),
    getCard
)
const validateAnswer = converge(
    liftA2(equals),
    cardToHint,
    getHint
)
const setIsCorrect = b => over('isCorrect', constant(b));
const adjustRank = compose(limitRank, incOrDec);
const updateRank = b => over('rank', adjustRank(b));
const applyFeedback = converge(
    liftA2(constant),
    setIsCorrect,
    updateRank
)
const markSelected = id =>
  assignBy(propEq('id', id), { selected: true })
const selectCard = id =>
  over('cards', map(markSelected(id)))
const answer = composeK(
    applyMove,
    selectCard
) 
const feedback = composeK(
    applyFeedback,
    validateAnswer
)
// Action a :: {type: string, payload: a}
// createAction :: String -> a -> Action a
const createAction = type => payload => ({type, payload});
const SELECT_CARD = 'SELECT_CARD';
const SHOW_FEEDBACK = 'SHOW_FEEDBACK';
const selectCardAction = createAction(SELECT_CARD);
const showFeedbackAction = createAction(SHOW_FEEDBACK);

const createReducer = actionReducer => ({type, payload}) => 
    prop(type, actionReducer)  // safe check type exists on actionReducer
        .map(applyTo(payload)) // we get back a function need to call with payload, using applyTo 
const turn = createReducer({
    SELECT_CARD: answer,
    SHOW_FEEDBACK: feedback
}) 

const reducer = (prevState, action) => {
    return turn(action)
        .chain(safe(isSameType(State))) // check result is the same type as State
        .map(execWith(prevState))       // run with execWith
        .option(prevState);             // unwrap Just and provide default value
    
};

const sillyVerb = createAction('SILLY_VERB');

console.log(
    reducer(
        state,
        selectCardAction('green-square')
    )
)