Redux is a predictable state container for JavaScript applications. It can help you keep your application states in centralize location to keep your application state consistent in whole application.

Integrating, understanding and proper use of Redux is very tricky. We tried our best to make easy to use real world implementation for redux to make sure you can get benefit from it.

Live Example


Angular Listing Example with Redux

Angular Listing Example 2 with Redux

Angular Listing Example 3 with Redux

jAngular Toolkit include complete practical example for implementing advance level of normal or grid listing with redux support.

It uses mock api url for fetching data for preview purpose. You can test it with your own apis.

Technical Guide

If you open example e.g /listtings/grid/, you will notice directory structure like this.

  • listing.component.ts // main listing component
  • listing.component.html // main listing component template file
  • listing.model.ts // represent core listing models
  • listing.module.ts // represent listing module (packaged all components, dependencies for current listing related)
  • /partials/list.component.ts // partial module of list component
  • /partials/list.html // template file
  • /process/{files} // target adding or updating listing record
  • /reducer/{files} // managing reducer, actions and state models for current state
  • /services/{files} // include service injectors for managing listing settings, data access, dynamic forms and others.

There are some shared components, service injectors, directives may be used within listing module.

These all files and architecture can help you create complex listing functionality within your angular application easily and fastly.

If you have any question or suggestion please use our Knowlegebase section.