1

Technology Information: ReactJS + Typescript for the frontend. REST API built with nodeJS+express that stores data in a Cloud Firestore database. The frontend React application retrieves data using the REST API.

State Management on the Frontend: I'm currently using React hooks for state management. useContext is used for managing global state (user/session information), and useReducer is used for route level state. The useReducer hook is called by the top level component in any given route.

Advice Requested: If the user takes an action with the UI, I want to update the local state and show the appropriate changes in the UI instantly. I want to make sure the data gets saved to our backend, and only display an error message if we failed to save the data.

  1. What's the most seamless way of handling data synchronization in this case? What's the best architecture here?
  2. Should I make calls to the REST API from within each action in the reducer?
  3. What's the cleanest way to implement this throughout a large application? How should I organize my code for data synchronization?
  4. Along the same lines, if I want to listen to changes to the user object in the backend, and reload the user's information that's stored in global state using the useContext hook, how should I try to do this?

P.S. I love how seamlessly Asana syncs & saves your data. I'm wondering what are the best practices here if I want to have that seamless of an experience.

xyz123
  • 191
  • 1
  • 3
  • 6
  • 1
    One pattern I've found helpful is when you make a request to your REST API, upon success return the new updated value, and upon failure return the original request value. And then jus always have you're state/view holding what the API has returned. – Nicholas Porter Jan 21 '20 at 00:32

0 Answers0