NgRx Code Review Checklist

NgRx (Reactive Extensions for Angular) is becoming more and more popular in the Angular community.  It is a great way to manage state using the redux pattern and keep your application scalable.  In this blog post, we provide a checklist for efficiently and expertly reviewing NgRx code, with links to our NgRx tutorial series for additional instruction.

8- Step NgRx Code Review Checklist

• Is NgRx setup properly?
  Is the AppModule setting up the root reducers and effects properly? Same with feature modules?  Are developers able to use Redux Devtools to view state?  If you follow this guide, the answer to these questions will be “yes”:  https://www.intertech.com/ngrx-tutorial-quickly-adding-ngrx-to-your-angular-6-project

• Is the code in the correct location in the folder structure?
  Your organization should agree upon standards for where to put store-related code.  I personally believe it should be under a “store” folder at the main level and for each feature module.  Much easier to find code in this structure.  See a picture of a good folder structure near the bottom of this post:  https://www.intertech.com/ngrx-tutorial-actions-reducers-and-effects

• Are the actions in their own file and organized according to best practices?
  Each reducer should have a corresponding actions file that has the string constants, action class which derives from Action and a type of all available actions. See in this post:  https://www.intertech.com/ngrx-tutorial-actions-reducers-and-effects

• Is your new reducer added to the index.ts State and ActionReducerMap properly?
  If you are creating a new reducer, make sure it is added to the main or feature State interface as well as the “reducers” ActionReducerMap. See the setup in this post:  https://www.intertech.com/ngrx-tutorial-actions-reducers-and-effects

• For the feature module State interface, does it extend the main State interface?
  Feature modules reducers need to define a State interface that extends the main State interface so that the feature module has access to its own State and the main State. It’s broken down in this post:  https://www.intertech.com/ngrx-tutorial-add-state-to-feature-module

• Are the selectors created for State properties properly?
  State should be accessed via selectors. These selectors are created with the “createFeatureSelector” and “createSelector” functions from NgRx.  See these two posts on selectors for detailed information:  https://www.intertech.com/ngrx-tutorial-accessing-state-in-the-store and https://www.intertech.com/ngrx-tutorial-add-router-info-to-state

• Are you retrieving parameters from the URL using NgRx?
  It is very important to have one source of truth with NgRx and programming in general. If you are storing things like customerId in the store but it’s always available in the URL, you’re doing it wrong.  Find the details here: https://www.intertech.com/ngrx-tutorial-add-router-info-to-state/

• Are you loading and updating the store from the API using effects?
  It can be tempting just to call a service on the component and dispatch the results to store the data in NgRx but this is the wrong approach. It’s best to use an effect to call the API and store the resulting data in State via another action that the reducer handles.  The effect is called via a store dispatch of an action that the effect is listening for.  For details, check this post: https://www.intertech.com/ngrx-tutorial-actions-reducers-and-effects/

About Intertech

Founded in 1991, Intertech delivers software development consulting to small, medium and large companies, including Fortune 500 companies, as well as Government and Leading Technology institutions. Learn more about us. Whether you are a developer interested in working for a company that invests in its employees or a company looking to partner with a team of technology leaders who provide solutions, mentor staff and add true business value, we’d like to meet you.