operators for array-stores

[AlexandrHoroshih]

At the moment there is no option in basic effector api to do something like call that event on every item from this array in store or in event payload

Idea is to create operator which is something like this:

sampleForEach({
  source: Store<T[]> | Event<T[]>,
  clock,
  target: Event<T> | Effect<T> // will be run for Every T from T[] in source
})

Live example:
https://share.effector.dev/vx6hm1il

Possible use case:

const runTransaction = createEvent<Transaction>()
const runTransactionGroup = createEvent<Transaction[]>()

sampleForEach({
  source: runTransactionGroup,
  target: runTransaction, // run all transactions from group one-by-one
})

runTransaction.watch(t => console.log('Handling transaction...', t)) // for example, we just logging all transactions

runTransaction({
  type: 'transactionType',
  body: 'Single',
})

runTransactionGroup([
  {
    type: 'transactionType',
    body: 'group1',
  },
  {
    type: 'transactionType',
    body: 'group2',
  },
  {
    type: 'transactionType',
    body: 'group3',
  },
])

// in logs:
Handling transaction... 
 {type: "transactionType", body: "Single"}

Handling transaction... 
 {type: "transactionType", body: "group1"}

Handling transaction... 
 {type: "transactionType", body: "group2"}

Handling transaction... 
 {type: "transactionType", body: "group3"}

[AlexandrHoroshih]

Possible problem:

sampleForEach({
  source: runTransactionGroup,
  target: runTransaction, // run all transactions from group one-by-one
})

sample({
 clock: runTransaction // clock will be triggered only for last triggered element from the group
 greedy: true // unless sample is greedy
})

UPD: not reproducible with effect as a runner https://share.effector.dev/BF1iOwSy

[sergeysova]

Another implementation:

export function each<S, T = S>(config: {
  source: Event<S[]> | Store<S[]>;
  clock?: Unit<any>;
  target?: Unit<T>;
  fn?: (value: S) => T;
}): Unit<T> {
  const target = config.target ?? createEvent<V>();
  const fn = config.fn ?? mapper;

  const fx = createEffect((list) => list.forEach((value) => target(fn(value))));

  sample({
    source: config.source,
    clock: config.clock ?? config.source,
    target: fx,
  });

  return target;
};

Try it

[AlexandrHoroshih]

Wouldn't be an fn also convinient?

const value = each({
  source,
  clock,
  fn: (v, clock) => `yay!: ${v} + ${clock}`
});

Something like this: https://share.effector.dev/TqiPuUDm

[Kelin2025]

A while ago, I was asking for a solution to "call event for each item"
What I don't like in the current suggestion is that you'll also need guardForEach, splitForEach, etc... I believe that duplicating each method just to support lists is not the way to go
Another problem here is that sometimes we need to call something "X times". It's the same case but it's not a list-related thing
So, I don't think that we want to solve it that rough
Maybe something more low-level like would do the trick:

// Calls runTransaction payload.length times
const runTransactions = repeat({
  times: payload => payload.length,
  fn: (payload, idx) => payload[idx],  // idx is based on the current iteration. 
                                       // We can also return undefined here to skip call for a specific item
  target: runTransaction
})

// Will call runTransaction with each item
runTransactions([1, 2, 3])

// We can also add support for stores/plain values
const doFiveRequests = repeat({
  times: 5,
  target: doRequest
})

// Will call doRequest 5 times with the same payload ('cause no fn was provided)
doFiveRequests("something") 

// Real example: plan X reminders with time interval 
// depending on reminders count set by user
const saveReminders = repeat({
  source: $date,
  times: $count,
  fn: (date, idx) => ({ 
    date: date.addMinutes(5 * idx) 
  }),
  target: createReminder
}) 

// Will call createReminder $count times with data from fn
saveReminders()

Note that repeat returns clock, not target

[val-o]

in my opinion, this might be a bit unintuitive API, especially for beginners. I think cases like having one event to fire multiple others with data provided in payload array of the original event is quite common. And having to do repeat to achieve this looks like a hack

[val-o]

But repeat helper would be great to have as separate feature

[Kelin2025]

in my opinion, this might be a bit unintuitive API, especially for beginners. I think cases like having one event to fire multiple others with data provided in payload array of the original event is quite common. And having to do repeat to achieve this looks like a hack

The idea here is that each is a specific case of repeat. We can implement repeat and then, by using it, we can implement each as well

each(runTransaction)
// ===
repeat({
  times: payload => payload.length,
  fn: (payload, idx) => payload[idx],
  target: runTransaction
})

Also

times(5, doRequest)
// ===
const doFiveRequests = repeat({
  times: 5,
  target: doRequest
})

[val-o]

Here is a bit unrelated to patronum proposal, what if we would add some container for tagging multiple target in effector itself, so API would look like this.

declare const loadItemsByIds: Event<string[]>:
declare const loadItemById: Event<string>:

forward({ from: loadItemsByIds, to: eachOf(loadItemById) })
sample({ clock: loadItemsByIds, target: eachOf(loadItemById), fn.... }) 
// etc.

eachOf can be just a function that wraps original unit, so it can be distinguishable from unit which expects array as payload
This might help solve the issue mentioned above, that we would also need versions of core methods for propagating to multiple units

Imho, such code is also easy to read - I want to forward from loadItemsByIds event to each of loadItemById event
Not sure about the naming of eachOf though :)

disclaimer: just starting using effector

[faustienf]

const series = <T>(target: Event<T> | Effect<T, unknown>) => {
  const pop = createEvent();
  const push = createEvent<T[]>();
  
  const $queue = createStore<T[]>([])
  	.on(push, (state, payload) => [...state, ...payload])
  	.on(pop, ([, ...rest]) => rest);
  
  const $first = $queue.map((queue) => queue.at(0));
  
  sample({
    clock: $first,
    filter: (first) => Boolean(first),
    target: [target, pop],
  });
  
  return push;
};

// USAGE
sample({
  clock: loadItemsByIds.doneData,
  target: series(loadItemById)
})