Is there a way to tell *WHERE* an action was called within a React/Redux file structure?

Question

Is there a way to tell WHERE an action was called within a React/Redux file structure? I'm hunting for an action that I can see being called. I just can't tell where in the file system the action was dispatched. Is there a way to determine that using Redux tools? I feel like I'm chasing a rabbit down its hole right now.

Help! Thanks!

Answer 1

The basic approach is:

• Search the codebase files for the action type string
• See if it's being used in an action creator
• Do a "Find Usages" or a text search to see where that action creator is being imported and used

Also, you could use a middleware that will log a stack trace whenever it sees a specific action. I don't think I've seen a middleware like this yet, but here's a quick (and briefly tested) implementation that should work and give you a stack trace back to the dispatch location:

const createLogActionStackTraceMiddleware = (actionTypes = []) => {
    const logActionStackTraceMiddleware = storeAPI => next => action => {
        if(action.type && actionTypes.includes(action.type)) {
            console.trace(`Action: ${action.type}`);
        }

        return next(action);
    }

    return logActionStackTraceMiddleware;
}


// in your store setup:
const stackTraceMiddleware = createLogActionStackTraceMiddleware(["ACTION_1", "ACTION_2"]);

const middlewareEnhancer = applyMiddleware(thunkMiddleware, stackTraceMiddleware);