The Berryware Blog

React – Organizing Imports January 20, 2018

I’ve been using TypeScript with React code for a couple of years now so I’ve learned what works and what doesn’t, so I thought I’d share a little of that wisdom…

Over time you’ll find that your application code starts to grow and grow until it starts to become a bit messy and you need to organize things a little better.  If you have some “best practices” in your toolbox you can avoid having to go back and change all your old… so I’ll share this little tip that will hopefully save you some time later: how to organize your imports.

import { Action, Dispatch, Store } from 'redux';
import * as ActionTypes
  from '../../shared/constants/actions/ActionTypes';
import { FSAAction }
  from '../../shared/models/actions/base';
import { ShowPersonImageActions }
  from '../actions/workflows/ShowPersonImageActions';
import { StateTree }
  from '../../shared/models/state/StateTree';
import {
  WorkflowShowPersonImagesStepAction,
  WorkflowShowPersionImagesAction
} from '../../shared/models/actions/workflow';
import { FSAWithType } from '../../shared/models/actions/base';

// externals
import { Action, Dispatch, Store } from 'redux';

// state
import { StateTree }
 from '../../shared/models/state/StateTree';

// action creators
import { ShowPersonImageActions }
 from '../actions/workflows/ShowPersonImageActions';

// consts/enums
import * as ActionTypes
 from '../../shared/constants/actions/ActionTypes';

// interfaces
import {
 WorkflowShowPersonImagesStepAction,
 WorkflowShowPersionImagesAction
} from '../../shared/models/actions/workflow';
import { FSAAction }
 from '../../shared/models/actions/base';
import { FSAWithType } from '../../shared/models/actions/base';

I like to put “externals” at the top, followed by the basic building blocks in order… “state” first because that’s where we’re getting our data from (think of ordering things a layer at a time).  Next we have actions and the constants/enums that are used along with them and finally interfaces.  I consider interfaces as the connecting glue that pulls everything together so I put them last.

Hopefully you will have noticed something at this point: grouping things into categories may have highlighted something… we have an import statement that can be combined!

import { FSAAction, FSAWithType } from '../../shared/models/actions/base';

Obviously this technique assumes that you’ve split out interfaces into separate files etc. and a few other code structuring rules are in place, but you should get the idea of how to apply this to you own projects.  Let me know if you like the idea in comments below or if you have another approach that works for you.