Site is currently on development mode

Using Proxies with Redux Types

Last updated 1 year ago by Alec Barlow


One of the most common problems that I run into when using Redux is trying to figure out why an action is not being captured by a reducer. For someone just getting starting with Redux, debugging this issue can be especially overwhelming because of how Redux manages data flow. So before you start pouring over configuration code, or the logic contained in your action creators and reducers, please, make sure your action types are defined and spelled correctly.

In any application that I have built, most bugs that I have run into are simply due to typos. However, the solution to this particular problem is harder to spot because no errors are raised when the application is run. Take a look at the snippet below.

``` // actionTypes.js

export const FETCHFILEREQUEST = 'fetchfilerequest'; export const FETCHFILESUCCESS = 'fetchfilesuccess'; export const FETCHFILEFAIL = 'fetchfilefail';

// filesReducer.js

import { FETCHFILEREQUEST, FETCHFILESUCESS, FETCHFILEFAIL } from '../actions/actionTypes';

const filesReducer = (state = {}, action) => { switch (action.type) { case FETCHFILESUCESS: return { ...state, file: action.payload }; default: return state; } }

export default filesReducer; ```

Assuming we dispatched an action with type FETCHFILESUCCESS, the filesReducer should catch the action before the default case is returned. But what if that is not happening? Where do we start the debugging process. There does not appear to be anything wrong with the code in the reducer; the action type was imported and matches the case in the switch statement. There are no errors in the browser. Where is the issue?

You may have noticed that I misspelled SUCCESS in filesReducer.js, but the reason this can be hard to catch is because importing undefined types does not cause an error, so when we import FETCHFILESUCESS, its value is actually undefined, so our reducer always hits the default case.

It would be nice if the existing import/export system could help us catch this. Unfortunately, since action types are just strings, validating their existence is challenging. Luckily, we have another option.

Read full Article