javascript - lambda : How can I make this imperative reducer more declarative?

Question

我有以下 reducer 功能:

reducer 的第一个 参数是聚合值，第二个 参数是下一个值。下面的 reducer 函数减少了相同的 reaction 参数，但聚合了 state$ 值。每个 reducer 函数都会产生一个新的聚合值。

/**
 * 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);

上面的方法有效，但是函数固定在reducer列表中。看来我应该能够用 RamdaJS 做这样的事情。

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

我是 RamdaJS 的新手，如果这是一个菜鸟问题，请原谅我。

我如何仅使用 RamdaJS 执行一个 reducer 链？

Answer 1

and构造一个新的 reducer ，(r, x) => ... ，通过组合两 (2) 个输入 reducer ，f和 g -

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

all , 通过使用 and , 通过组合任意数量的 reducer 构造一个新的 reducer -

const identity = x =>
  x

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

定义myReducer使用 all -

const myReducer =
  all
    ( reactionDisabledReducer
    , reactionIconReducer
    , reactionOrderReducer
    // ...
    )

给定这三 (3) 个 reducer 的模拟实现 -

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

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

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

运行 myReducer查看输出

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' }

展开下面的代码片段以在浏览器中验证结果 -

const identity = x =>
  x

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

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

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

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

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

const myReducer =
  all
    ( reactionDisabledReducer
    , reactionIconReducer
    , reactionOrderReducer
    // ...
    )

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' }

---

您可以为and取任何您喜欢的名字。和 all .我可以将它们视为 reducer 的一部分模块，如 reducer.and和 reducer.all