Race condition when updating redux state?

Viewed 247

I'm using redux-saga with takeEvery which allows multiple actions to execute simultaneously:

export function* watchSaga() {
    yield all([
        takeEvery(actionTypes.FETCH_DATA, fetchDataSaga)
    ])
}

and the fetchDataSaga looks like:

export function* fetchDataSaga(action) {
    yield put(actions.fetchDataStart())
    try {
        const response = yield axios.post(url, body)
        yield put(actions.fetchDataSuccess(response.data))
    } catch (error) {
        yield put(actions.fetchDataFail(error.response.data.error))
    }
}

in fetchDataSuccess, I'm adding a new field (or updating if exist) into my redux state object:

const initialState = {
    myObj: {}
}
...
const fetchDataSuccess = (state, action) => {
    const newKey = action.newKey
    return {
        ...state,
        myObj: {
            ...myObj,
            [newKey]: {
                ...myObj[newKey],
                timestamp: new Date().getTime()
            }
        }
    }
}

So I make concurrent calls to the saga ,let's say 100 times:

yield all([
    call(fetchDataSaga, action[0])
    call(fetchDataSaga, action[1])
    call(fetchDataSaga, action[2])
    ...
    call(fetchDataSaga, action[99])
])

There should be 100 fields in myObj afterward.

My question is, am I going to get the latest state every time in the fetchDataSuccess reducer? Or will there be a race condition that one of the reducers read the old previous state, and if so, how can I prevent it?

0 Answers
Related