Batching puts

[Noitidart]

Hi there, I asked a question on Stackoverflow but was not able to get an answer. I was hoping to try here please.

I have to do two puts. The render both strongly depend on each other. Meaning the first put has to happen at same time as second. Currently, every put I do causes a re-render of the related components. Same time means, the store.subscribe must not be triggered until both put's happen. I can create a specific action for this, but I was wondering if there was a way to batch put's. I tried put.resolve and the also the following:

yield all([
    put(updateEntity(ENTITYS.COMMENT, id, comment)),
    put(updateEntity(ENTITYS.STORY, storyId, entity => ({ commentIds:entity.commentIds.map(commentId => commentId === id ? comment.id : commentId) })))
]);

But this didn't work, the store.subscribe is being triggered after each put.

Stackoverflow - https://stackoverflow.com/q/46044919/1828637

[jimbol]

We use redux-batched-actions for this.

After setting up you just go.

import { batchActions } from 'redux-batched-actions';

yield put(batchActions([
  updateEntity(ENTITYS.COMMENT, id, comment),
  updateEntity(ENTITYS.STORY, storyId, entity => ({ commentIds:entity.commentIds.map(commentId => commentId === id ? comment.id : commentId) })),
]))

[Noitidart]

A sincere thanks @jimbol for your reply! Is there no possible built in way? Like with put.resolve? I tried put.resolve but couldn't find a solution.

[jimbol]

You're welcome!

This is might be a comment on Redux. You'll notice store.subscribe is part of the Redux api, not Redux-Saga.

From the Redux issue on the subject, the suggested approach has been implemented by the redux-batched-actions library.

Stealing the example from that issue.

You could create an action creator which takes a list of actions.

function batchActions(actions) {
  return {
    type: 'BATCH_ACTIONS',
    actions: actions
  };
}

// usage
store.dispatch(
  batchActions([
    doSomething(),
    doSomethingElse()
  ])
);

Then you could use a Higher Order Reducer to handle those actions all at once.

function enableBatching(reducer) {
  return function batchingReducer(state, action) {
    switch (action.type) {
    case 'BATCH_ACTIONS':
      return action.actions.reduce(batchingReducer, state);
    default:
      return reducer(state, action);
    }
  }
}

// usage
let store = createStore(enableBatching(reducer));

(source)

Hope this helps!

[Noitidart]

Thanks very much for this explanation! Ok I will go with this :)

[Andarist]

Keep in mind that u probably often want to take 1 action out from the batch. You can do so by providing a custom emit function during redux-saga initialization like here

[Noitidart]

Thank you very much Andarist for that note!

[yunusyuksel]

Keep in mind that u probably often want to take 1 action out from the batch. You can do so by providing a custom emit function during redux-saga initialization like here

How can I define that custom emitter with redux-saga Version 1.2.2? It seems I can not define it through the option param in createSagaMiddleware

[neurosnap]

For anyone stumbling upon this issue, we added a recipe for batching actions to our docs: https://redux-saga.js.org/docs/recipes#batching-actions

Please refer to that recipe for our official recommendation.