State and State Management

State

The project uses Redux for state management, each of the top-level properties in the state object is a namespace that corresponds to a Redux Module with actions, reducers, selectors and sagas.

Sagas are used for asynchronous actions.

State object

const state = {
  router: Object,                       // router is redux-first-router state, managed by its middleware
  app: Object,                          // app refers to global settings
  map: {                                // map is Map component state, based on Uber's React Mapbox GL map
    settings: {
      isFlying: Boolean,
      isLoaded: Boolean
    },
    viewport: {
      width: Number,                    // Canvas element width
      height: Number,                   // Canvas element height
      zoom: Number                      // Map's zoom 2 to 20
      latitude: Float                   // Map's latitude
      longitude: Float                  // Map's longitude
    }
  }
}

Global settings [app]

• Collapse all widgets
• Collapse sidebar
• Active layers
• Basemaps (can have more than one)
• Contextual layers
• Search term
• Search state

Redux First Router [router]

Map Component [map]

Widgets [widgets]