Skip to content

State Management with NgRX

Thomas Hochstetter edited this page Mar 31, 2017 · 3 revisions

Using a Redux pattern changes the way we do things. It is important to have structured the flow of data well. This is a page where we will document the structure.

It takes some time to get one's head around at first. But the light dawns after a while ;) DO NOT GIVE UP!

Biggest takeaway for now: think of reducers as tables in a database

Technology

We'll be using NgRX as the state management framework. Although it adds another important dependency to the project it will be helpful as the project grows.

Check out the example app for some insight.

MH State Structure

Mockup

{
  "AppState": {
    "layout": {},
    "people": [
      {
        "person": {
          "details": {},
          "interactions": [],
          "groups": [
            {"group": {}},
            {"group": {}}
          ],
          "family": [
            {"person": {}},
            {"person": {}}
          ],
          "logs": [
            {"log": {}}
          ]
        }
      }
    ],
    "user": {
      "person": {},
      "token": ""
    },
    "myInteractions": [
      {"interaction": {}},
      {"interaction": {}}
    ],
    "events": [
      {"event":{}}
    ],
    "sermons": [
      {"sermon": {}}
    ]
  }
}
Clone this wiki locally