"Interrupted by an error in the chain"

[natdm]

I have the following reducer and function:

function updateWatchedItems(event) {
    //Return the items for this bidder
    const FLAGGED_ITEMS = filter(event.watching, i => i.bidder === store.getState().bid_user.uid);

    //Return only the true items
    const WATCHING = filter(FLAGGED_ITEMS, i => i.watching);

    return event.items.map(item => {
        let watching = find(WATCHING, i => i.item_id === item.item_id);
        let watchingValue = typeof watching != "undefined";
        return Object.assign({}, item, {watching: watchingValue})
    });
}
export default function reducer(state, action) {
    state = state || {};
    switch(action.type) {
        case SET_CURRENT_EVENT:
            return Object.assign({}, action.event, {items: updateWatchedItems(action.event)});
            //return action.event;
        case CLEAR_EVENT:
            return {};
        default: return state;
    }
};

For some reason, the devtool says, "Interrupted by an error in the chain". The app works as intended, as far as I can see, but it fails right after showing this reducer. Is it because I'm calling the store state within this reducer, which is bad practice?

What I'm doing is I have an array of objects that have the item_id key and value, with some data. Then I have an array of objects with item_id and watched:true/false. I'm just trying to blend these together to see if they're watched or not. It's using "find" from lodash, which returns undefined if it doesn't find an object that fits the parameters given to it.

let watching = find(WATCHING, i => i.item_id === item.item_id); let watchingValue = typeof watching != "undefined";

Is this what's causing the issues? I do fix it right after, just saying if it wasn't found, it's false. If found, true.

[gaearon]

For some reason, the devtool says, "Interrupted by an error in the chain". The app works as intended, as far as I can see, but it fails right after showing this reducer

If you get Interrupted by an error in the chain it means your reducer threw an error and will crash in production. You can see the stack trace that led to the error in the console. If it doesn’t help, you can turn off Redux DevTools and let the JS crash to see how it happens. You can set “break on exceptions” in your debugger to debug the problem better.

Using store.getState() inside the reducer is definitely an anti-pattern but it shouldn’t cause crashes. That said it severely violates the Redux contract and will make your reducers fragile. If you need some data, either pass it as part of the action, or route it down from the top-level reducer manually as a third argument.

It’s hard to guess from your code where exactly it throws. In any case, it’s not an issue with the library—your code is throwing, so regular JavaScript techniques for finding the crashes apply here.

I hope this helps!

[natdm]

Thanks. I fixed the anti-pattern and refactored a bit. Fixed the error, not sure where it was though.

Thanks for all your great contributions, Gaearon.