Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

254
Views
How will my ngrx store detect change on the server side?

I recently added ngrx store to my existing angular2 app in order to simplify the code and maintain a shared state. However I am confused about one part, I update my state from the server once in the beginning and after wards I just work on the state without checking the server. So what happens when for example some thing changes on the backend? Am i to check it every time when, I go the that page or is there a better way? Basically, I want to know what is the best practice for making sure that your state data is updated to show the server data?

about 4 years ago · Santiago Trujillo
1 answers
Answer question

0

It is recommended to use NGRX Effects. When you implement NGRX Effects along with the Store, any HTTP side effects are handled by the Effects, which in turn, will use an Action in the Store to update the data. An Effect listens for the Action and uses the payload of the Action to perform a side-effect(HTTP). When the Effect finishes, it calls a new Action(either an Action for success or an action for failure) with a new payload, thus updating the data in the Store.

In the example in the Effects docs it shows an Effect for Login:

@Injectable()
export class AuthEffects {
  constructor(
    private http: Http,
    private actions$: Actions
  ) { }

  @Effect() login$ = this.actions$
      // Listen for the 'LOGIN' action
      .ofType('LOGIN')
      // Map the payload into JSON to use as the request body
      .map(action => JSON.stringify(action.payload))
      .switchMap(payload => this.http.post('/auth', payload)
        // If successful, dispatch success action with result
        .map(res => ({ type: 'LOGIN_SUCCESS', payload: res.json() }))
        // If request fails, dispatch failed action
        .catch(() => Observable.of({ type: 'LOGIN_FAILED' }))
      );
}

In this example, the Effect for Login listens for the LOGIN action. When the LOGIN action occurs, it uses the action's payload and performs an HTTP POST. When the HTTP POST returns, it either calls the action LOGIN_SUCCESS with the json response for the payload, or it returns the LOGIN_FAILED action.

This way, your Store is always kept in the loop on any side effects, such as HTTP. If one component updates a record in the database, the Effect should notify the Store so that all components subscribed to that data get the updated data.

Hope that helps.

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!