Today we'll learn how to use Redux with Angular X. The main goals of our lab are:

• show how to use ngRx in Angular
• get familiar with the Redux terminology
• explore the Redux DevTools
• and have some fun...

Polls

Angular X

Redux

Core Concepts

• General Idea

  Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch()

• Reducers

  Actions describe the fact that something happened, but don't specify how the application's state changes in response. This is the job of reducers.

• Store

  The Store is the object that brings them together. The store has the following responsibilities:

  • Holds application state
  • Allows access to state via getState()
  • Allows state to be updated via dispatch(action)
  • Registers listeners via subscribe(listener)
  • Handles unregistering of listeners via the function returned by subscribe(listener)

• Data Flow

  Redux architecture revolves around a strict unidirectional data flow.

Three Principles

• Single source of truth

  The state of your whole application is stored in an object tree within a single store.

• State is read-only

  The only way to change the state is to emit an action, an object describing what happened.

• Changes are made with pure functions

  To specify how the state tree is transformed by actions, you write pure reducers.

To sum it up...

• git clone https://github.com/intelliware-coe-web/lab-angular-redux.git
• npm install
• npm start
• Open http://localhost:4200

Excepted result:

Checkout the feat-people-details branch, and look for the following comments:

• // LAB: Step 1 - Add new action type
• // LAB: Step 2 - Create new action
• // LAB: Step 3 - Generate new immutable state
• // LAB: Step 4 - Dispatch the action
• // LAB: Step 5 - Update people field

Excepted result:

git checkout tags/feat-people-details-solution

Here's the API: https://swapi.co/api/planets

• For Chrome
• For Firefox

Excepted result:

Redux

About the lab

Additional Resources

• Redux
• ngRx