Suppose I have a state with two numbers controlled with actions SET_NUMBER and SET_OTHER_NUMBER, and then I have a saga tries to make sure both numbers are always set to the same value:

function* changeOtherNumber(action) {
    yield put(setOtherNumber(action.payload.number))
}

function* watchSetNumber() {
  yield takeEvery('SET_NUMBER', changeOtherNumber)
}

If I dispatch a SET_NUMBER, will I ever run the risk of (event momentarily) render a component where the numbers do not equal each other? Or will the saga kick in and change the the other number before any rerender has the chance to run?

(The two numbers are in different slices and controlled by different reducers… Sorry if the example is overly simplified, but I hope it conveys the question I have.)

The docs says the following:

put(action)​

Creates an Effect description that instructs the middleware to schedule the dispatching of an action to the store. This dispatch may not be immediate since other tasks might lie ahead in the saga task queue or still be in progress.

You can, however, expect the store to be updated in the current stack frame (i.e. by the next line of code after yield put(action)) unless you have other Redux middlewares with asynchronous flows that delay the propagation of the action.

but I have a hard time wrapping my head around those formulations.

(If the put action is not run atomically / synchronously with the original SET_COLOR action, what would the recommended approach be to do atomic updates like these? Or should I rethink the design completely?)