How can I transform this imperative reducer into a more declarative format using Ramda?

Question

How can I transform this imperative reducer into a more declarative format using Ramda?

I am currently working with a reducer function that aggregates values in a specific way.

The first argument is the aggregated value, while the second argument represents the next value. This function reduces over the same reaction argument, aggregating the state$ value. Each time it runs, a new aggregated value is produced.

/**
 * Applies all the reducers to create a state object.
 */
function reactionReducer(reaction: ReactionObject): ReactionObject {
    let state$ = reactionDescriptionReducer({}, reaction);
    state$ = reactionDisabledReducer(state$, reaction);
    state$ = reactionIconReducer(state$, reaction);
    state$ = reactionOrderReducer(state$, reaction);
    state$ = reactionStyleReducer(state$, reaction);
    state$ = reactionTitleReducer(state$, reaction);
    state$ = reactionTooltipReducer(state$, reaction);
    state$ = reactionVisibleReducer(state$, reaction);
    return state$;
}

const state = reactionReducer(value);

Although this setup works, I'm looking for a more flexible solution. I believe RamdaJS could provide a way to achieve this.

const state = R.????({}, value, [reactionDescriptionReducer
    reactionDisabledReducer,
    reactionIconReducer,
    reactionOrderReducer,
    reactionStyleReducer,
    reactionTitleReducer,
    reactionTooltipReducer,
    reactionVisibleReducer]);

As someone new to RamdaJS, I appreciate your patience with what may be a beginner question.

How can I utilize RamdaJS to run a chain of reducers effectively?

javascript typescript functional-programming ramda.js

Answer 1

Answer №1

and creates a fresh reducer, (r, x) => ..., by merging the two input reducers, f and g-

const and = (f, g) =>
  (r, x) => g (f (r, x), x)

all, utilizing and, forms a new reducer by combining multiple reducers-

const identity = x =>
  x

const all = (f = identity, ...more) =>
  more .reduce (and, f)

Create myReducer using all-

const myReducer =
  all
    ( disabledItemReducer
    , iconItemReducer
    , orderItemReducer
    // ...
    )

Assuming mocked implementations for these three (3) reducers are available-

const disabledItemReducer = (s, x) =>
  x < 0
    ? { ...s, disabled: true }
    : s

const iconItemReducer = (s, x) =>
  ({ ...s, icon: `${x}.png` })

const orderItemReducer = (s, x) =>
  x > 10
    ? { ...s, error: "over 10" }
    : s

Execute myReducer to observe the results-

const initState =
  { foo: "bar" }

myReducer (initState, 10)
// { foo: 'bar', icon: '10.png' }

myReducer (initState, -1)
// { foo: 'bar', disabled: true, icon: '-1.png' }

myReducer (initState, 100)
// { foo: 'bar', icon: '100.png', error: 'over 10' }

Expand the code snippet below to verify outcomes in your browser-

const identity = x =>
  x

const and = (f, g) =>
  (r, x) => g (f (r, x), x)

const all = (f, ...more) =>
  more .reduce (and, f)

const disabledItemReducer = (s, x) =>
  x < 0
    ? { ...s, disabled: true }
    : s

const iconItemReducer = (s, x) =>
  ({ ...s, icon: `${x}.png` })

const orderItemReducer = (s, x) =>
  x > 10
    ? { ...s, error: "over 10" }
    : s

const myReducer =
  all
    ( disabledItemReducer
    , iconItemReducer
    , orderItemReducer
    // ...
    )

const initState =
  { foo: "bar" }

console .log (myReducer (initState, 10))
// { foo: 'bar', icon: '10.png' }

console .log (myReducer (initState, -1))
// { foo: 'bar', disabled: true, icon: '-1.png' }

console .log (myReducer (initState, 100))
// { foo: 'bar', icon: '100.png', error: 'over 10' }

You can select any names for and and all as you prefer. They could be part of a reducer module, such as reducer.and and reducer.all

Answer 2

and creates a fresh reducer, (r, x) => ..., by merging the two input reducers, f and g-

const and = (f, g) =>
  (r, x) => g (f (r, x), x)

all, utilizing and, forms a new reducer by combining multiple reducers-

const identity = x =>
  x

const all = (f = identity, ...more) =>
  more .reduce (and, f)

Create myReducer using all-

const myReducer =
  all
    ( disabledItemReducer
    , iconItemReducer
    , orderItemReducer
    // ...
    )

Assuming mocked implementations for these three (3) reducers are available-

const disabledItemReducer = (s, x) =>
  x < 0
    ? { ...s, disabled: true }
    : s

const iconItemReducer = (s, x) =>
  ({ ...s, icon: `${x}.png` })

const orderItemReducer = (s, x) =>
  x > 10
    ? { ...s, error: "over 10" }
    : s

Execute myReducer to observe the results-

const initState =
  { foo: "bar" }

myReducer (initState, 10)
// { foo: 'bar', icon: '10.png' }

myReducer (initState, -1)
// { foo: 'bar', disabled: true, icon: '-1.png' }

myReducer (initState, 100)
// { foo: 'bar', icon: '100.png', error: 'over 10' }

Expand the code snippet below to verify outcomes in your browser-

const identity = x =>
  x

const and = (f, g) =>
  (r, x) => g (f (r, x), x)

const all = (f, ...more) =>
  more .reduce (and, f)

const disabledItemReducer = (s, x) =>
  x < 0
    ? { ...s, disabled: true }
    : s

const iconItemReducer = (s, x) =>
  ({ ...s, icon: `${x}.png` })

const orderItemReducer = (s, x) =>
  x > 10
    ? { ...s, error: "over 10" }
    : s

const myReducer =
  all
    ( disabledItemReducer
    , iconItemReducer
    , orderItemReducer
    // ...
    )

const initState =
  { foo: "bar" }

console .log (myReducer (initState, 10))
// { foo: 'bar', icon: '10.png' }

console .log (myReducer (initState, -1))
// { foo: 'bar', disabled: true, icon: '-1.png' }

console .log (myReducer (initState, 100))
// { foo: 'bar', icon: '100.png', error: 'over 10' }

You can select any names for and and all as you prefer. They could be part of a reducer module, such as reducer.and and reducer.all

Answer 3

Answer №2

One way to leverage Ramda in this scenario is by taking advantage of its support for passing functions as a monad instance to R.chain (also known as the Reader monad).

This allows you to chain together multiple functions that operate on a shared environment - in this case, the variable reaction.

We can use R.pipeWith(R.chain) to enable composing a sequence of these functions, each taking an input (such as your $state flowing through each function) and returning a new function that takes the environment as argument, generating a result to be passed to the subsequent function in the pipeline.

// Functions for illustration purposes

const reactionDescriptionReducer = ({...state}, reaction) =>
  ({ description: reaction, ...state })

const reactionDisabledReducer = ({...state}, reaction) =>
  ({ disabled: reaction, ...state })

const reactionIconReducer = ({...state}, reaction) =>
  ({ icon: reaction, ...state })

// Using `R.pipeK`
const kleisli = R.pipeWith(R.chain)

// Functions going into chain need to be curried
const curried = f => a => b => f(a, b)

// Composing the series of functions
const reactReducer = kleisli([
  curried(reactionDescriptionReducer),
  curried(reactionDisabledReducer),
  curried(reactionIconReducer)
])({})

// If all goes well...
console.log(
  reactReducer("someCommonReactionValue")
)

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.26.1/ramda.min.js"></script>

Answer 4

One way to leverage Ramda in this scenario is by taking advantage of its support for passing functions as a monad instance to R.chain (also known as the Reader monad).

This allows you to chain together multiple functions that operate on a shared environment - in this case, the variable reaction.

We can use R.pipeWith(R.chain) to enable composing a sequence of these functions, each taking an input (such as your $state flowing through each function) and returning a new function that takes the environment as argument, generating a result to be passed to the subsequent function in the pipeline.

// Functions for illustration purposes

const reactionDescriptionReducer = ({...state}, reaction) =>
  ({ description: reaction, ...state })

const reactionDisabledReducer = ({...state}, reaction) =>
  ({ disabled: reaction, ...state })

const reactionIconReducer = ({...state}, reaction) =>
  ({ icon: reaction, ...state })

// Using `R.pipeK`
const kleisli = R.pipeWith(R.chain)

// Functions going into chain need to be curried
const curried = f => a => b => f(a, b)

// Composing the series of functions
const reactReducer = kleisli([
  curried(reactionDescriptionReducer),
  curried(reactionDisabledReducer),
  curried(reactionIconReducer)
])({})

// If all goes well...
console.log(
  reactReducer("someCommonReactionValue")
)

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.26.1/ramda.min.js"></script>

Answer 5

Answer №3

Instead of utilizing Ramda, my initial strategy would be to keep things simple with the following approach:

const createReducer = (...functions) => (input) => functions.reduce((state, func) => func(state, input), {})

const customFunc = createReducer(
  (currentState, data) => ({...currentState, foo: `<<-${data.foo}->>`}),
  (currentState, data) => ({...currentState, bar: `=*=${data.bar}=*=`}),
  (currentState, data) => ({...currentState, baz: `-=-${data.baz}-=-`})
)

console.log(
  customFunc({foo: 'a', bar: 'b', baz: 'c'})
) //~> {foo: '<<-a->>', bar: '=*=b=*=', baz: '-=-c-=-'}

Although Ramda offers reduce and flip, their use in this particular scenario may not provide significant benefits.

Answer 6

Instead of utilizing Ramda, my initial strategy would be to keep things simple with the following approach:

const createReducer = (...functions) => (input) => functions.reduce((state, func) => func(state, input), {})

const customFunc = createReducer(
  (currentState, data) => ({...currentState, foo: `<<-${data.foo}->>`}),
  (currentState, data) => ({...currentState, bar: `=*=${data.bar}=*=`}),
  (currentState, data) => ({...currentState, baz: `-=-${data.baz}-=-`})
)

console.log(
  customFunc({foo: 'a', bar: 'b', baz: 'c'})
) //~> {foo: '<<-a->>', bar: '=*=b=*=', baz: '-=-c-=-'}

Although Ramda offers reduce and flip, their use in this particular scenario may not provide significant benefits.

How can I transform this imperative reducer into a more declarative format using Ramda?

Answer №1

Answer №2

Answer №3

Similar questions

React-Select for Creating a Dynamic Multi-Category Dropdown Menu

Is it possible to determine the type of a variable by simply clicking on it in IntelliJ (specifically in typescript)?

Receiving an abundance of alert notifications triggered by the search functionality of jsTree

Creating a 2D Image Display in three.js

Set the display property of all child elements within the DIV to none

What's the deal with the `return of ()` syntax?

Ways to retrieve element(s) and delete a specific class located in the DOM structure

Is it possible to display a variety of color schemes in just one console.log()?

What is the best way to position my Jchartfx area graph below my gridview?

Wait for another user keypress event in jQuery after a 0.5 second delay

The nuSelectable plugin enhances the functionality of jQuery

What is the most efficient method for managing window properties and child components in React/Redux?

Adding Google Tag Manager to a NextJS TypeScript project can be tricky, especially when encountering the error message "window.dataLayer is not

Exploring the return type of the `within` function in TypeScript Library

In certain situations, the JavaScript code runs either before or after the print dialog is displayed when using the window

Angular foreach method encounters a syntax issue

Modify mesh in three.js scene

Building an anchor tag that employs the HTTP DELETE method within an Express.js app

Error Encountered While Creating a Polygon Wallet on Fireblocks

Express Angular Node Template Render throwing an error: module 'html' not found